Fix phantom scrolling in DetailLayout sticky sidebar

What does this MR do and why?

The shared DetailLayout component (CI job details, feature flags, work items, artifact registry, alert details) gave its sticky sidebar a forced height slightly too tall for the space below the page heading. On pages with short main content (for example a CI job showing "This job does not have a trace."), this pushed the scroll container about 32px past the viewport. The result was a phantom scrollbar: the page looked scrollable, and scrolling hid and revealed the heading with nothing to scroll.

Changes:

  • SCSS (detail_layout.scss): the sidebar uses max-height with min-height: 0 instead of a forced height. A short sidebar shrinks to its content; a long one is still capped and scrolls internally.
  • Live space measurement (detail_layout.vue): --detail-layout-sidebar-space is the live distance from the scroll container top to the sidebar's current top edge, so the cap fits the visible area in every scroll state.
  • Re-measure when stale:
    • A ResizeObserver on the layout root catches content above the sidebar growing after the first measurement (page heading, job log).
    • BaseLayout now emits sticky-change when the header sticks or unsticks. That changes --layout-sticky-header-height after the scroll handler has measured, so a single scroll jump (like the job log auto-scrolling to the bottom) left the sidebar's bottom out of view. DetailLayout re-measures on that event.
  • The stuck sidebar is offset by one spacing unit so it clears the sticky header, and sidebar padding is adjusted.
  • Small refactor:
    • Removes the old work item right-sidebar grid overrides not applying anymore in work_items.scss, now handled by DetailLayout itself
    • Moves the spacing also to the sidebar itself for consistency
    • Replaces the custom bottom spacing in the work item sidebar for the shared spacing in DetailLayout
Before After

How to set up and validate locally

  1. Open a CI job with no trace. The page should not be scrollable (e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/388)
  2. Open a job with a long log. After it auto-scrolls to the bottom, the sidebar should end exactly at the bottom of the visible area, and all its items should be reachable (e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/411)
  3. Open a work item and scroll down. The stuck sidebar should be correctly sized and sit below the sticky header (e.g. https://gdk.test:3000/flightjs/Flight/-/work_items/9)

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist.

Edited by Sascha Eggenberger

Merge request reports

Loading
Loading