Skip to content

Fix FileTree component height

Stanislav Lashmanov requested to merge slashmanov/fix-file-tree-height into master

What does this MR do and why?

This MR fixes:

  1. File tree jumps around when collapsing/expandin... (#395795 - closed)
  2. Code review bar hides last file in file browser (#399622 - closed)
  3. MR Diff > Gap between the files browser and the... (#392968 - closed)
  4. Merge request diff view makes file tree and fil... (#396373 - closed)

Most of these are a regression from Use virtual scroller for diffs file tree (!111518 - merged).

It does so by doing the following:

  1. Switches from ResizeObserver to window resize events
  2. Inherits the height from parent element by limiting scroll target element overflow with overflow: hidden
  3. Respects ReviewBar component height
  4. Uses row height to calculate scroll height on narrow screens

Important: this MR does not introduce new tests, we should handle that in another MR: Add test coverage for diffs FileTree component (#408383 - closed).

Screenshots or screen recordings

Before After
image image
image image
image image

How to set up and validate locally

Review bar compatibility

  1. Open a merge request with many files changed
  2. Start a review by writing a comment on one of the lines
  3. The Review bar should not cover the last file in the file tree

Narrow screen

  1. Open a merge request with 1-5 files changed
  2. Set your viewport width to less than 990 pixels.
  3. File tree height should not exceed the amount of files in the list
Edited by Stanislav Lashmanov

Merge request reports