Improve File Tree Browser peek mode height behavior

Jacques Erasmusrequested to merge
579330-improve-FTB-sticky-height into master

What does this MR do and why?

This MR improves the File Tree Browser (FTB) height behavior by disabling the sticky viewport filler when the file tree is in peek mode.

The StickyViewportFillerHeight component dynamically calculates and adjusts element height to fill the available viewport space for sticky-positioned elements. It continuously monitors scroll position, viewport changes, and element visibility to ensure the sticky element maintains optimal height as users scroll.

However, this dynamic height calculation is only necessary for sticky-positioned elements. The File Tree Browser uses two different positioning strategies:

Expanded mode (file-tree-browser-expanded):

  • Uses gl-sticky positioning (CSS position: sticky) to occupy space next to the content while keeping a remaining fixed
  • Remains visible while scrolling, sticking to the viewport
  • Requires StickyViewportFillerHeight to dynamically adjust its height as the user scrolls, ensuring it fills the available viewport space without overflow

Peek mode (file-tree-browser-peek):

  • Uses gl-fixed positioning (CSS position: fixed) with both top and bottom constraints
  • The browser automatically calculates height as the space between top: var(--application-header-height) and bottom: 0
  • Does not need StickyViewportFillerHeight because the height is already determined by the fixed positioning constraints

References

Issue #579330 (closed)

Screenshots or screen recordings

Before After
Screenshot_2025-11-25_at_09.47.34 Screenshot_2025-11-25_at_09.47.42

Desktop

Screen_Recording_2025-11-25_at_09.43.21

Mobile

Screen_Recording_2025-11-25_at_09.45.31

How to set up and validate locally

  1. Navigate to a repository page with the File Tree Browser enabled
  2. Toggle the file tree peek mode on/off (peek mode is activated on intermediate screen sizes)
  3. Verify that the file tree height takes up all of the remaining height in both modes.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Jacques Erasmus

Merge request reports