Fix FileTree component height
What does this MR do and why?
This MR fixes:
- File tree jumps around when collapsing/expandin... (#395795 - closed)
- Code review bar hides last file in file browser (#399622 - closed)
- MR Diff > Gap between the files browser and the... (#392968 - closed)
- 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:
- Switches from ResizeObserver to window
resize
events - Inherits the height from parent element by limiting scroll target element overflow with
overflow: hidden
- Respects ReviewBar component height
- 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 |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
Review bar compatibility
- Open a merge request with many files changed
- Start a review by writing a comment on one of the lines
- The Review bar should not cover the last file in the file tree
Narrow screen
- Open a merge request with 1-5 files changed
- Set your viewport width to less than
990
pixels. - File tree height should not exceed the amount of files in the list
Edited by Stanislav Lashmanov