Loading
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 usesmax-heightwithmin-height: 0instead of a forcedheight. 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-spaceis 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
ResizeObserveron the layout root catches content above the sidebar growing after the first measurement (page heading, job log). BaseLayoutnow emitssticky-changewhen the header sticks or unsticks. That changes--layout-sticky-header-heightafter 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.DetailLayoutre-measures on that event.
- A
- 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
- Removes the old work item right-sidebar grid overrides not applying anymore in
| Before | After |
|---|---|
How to set up and validate locally
- Open a CI job with no trace. The page should not be scrollable (e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/388)
- 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)
- 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