Skip to content

Fix merge request file browser height clipped at the top of the page

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

What does this MR do and why?

Fixes Merge requests file browser height is clipped (#426251 - closed).

This MR changes how the merge request file browser height is calculated. Before it used to be calculated by using CSS Custom Properties for the desktop and with JS on mobile. After the change it will always be calculated with JS because we can't use a pure CSS solution yet for the desktop version. The pure CSS solution would have to know the scroll position and height of the MR title, which is possible by using CSS Container Queries and CSS Scroll-driven animations. Unfortunately both of these are poorly supported by our current browser stack.

This MR also extracts the logic for handling file browser height from the tree_list.vue component into a dedicated one: tree_list_height.vue.

Screenshots or screen recordings

Before After
Screen_Recording_2023-10-31_at_07.56.16 Screen_Recording_2023-10-31_at_07.54.37

How to set up and validate locally

  1. Open any MR with lots of changed files (50+)
  2. Open the Changes tab
  3. Scroll the file browser tree to the end
  4. The last item should be visible
  5. Scroll a bit, the last item should be still reachable
  6. Repeat this with the started review (Add any draft comment)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports