Fix job log auto-scroll to bottom on initial page load
What does this MR do and why?
On the CI/CD job details page, the job log used to scroll to the bottom
on initial page load so the newest output was visible right away. This
stopped working after the job details page was migrated to the
design-system DetailLayout component.
The fetchJobLog action decided whether to auto-scroll by calling
isScrolledToBottom() just before the log rendered. This relied on the
scroll container being empty and non-overflowing at that moment, so the
check returned true and the page scrolled to the bottom after render.
Under DetailLayout, the log now shares the same scroll container
(.js-static-panel-inner) as the new page header and description, so
the container already overflows slightly before the log arrives. The
check therefore returns false on first load and the auto-scroll is
skipped, leaving the log pinned at the top.
This MR detects the initial log fetch using state.jobLogState === null
(this value is only set after the first successful fetch, so null
marks the first request). On that first fetch, it forces the log to
scroll to the bottom, unless the URL contains a hash fragment (for
example #L10), which means the user deep-linked to a specific line. In
that case the existing line-scrolling logic in log.vue handles the
scroll and we leave it alone. Subsequent polls keep the existing
behavior of following the bottom only when the user was already there.
Screenshots
| Before | After |
|---|---|
| On page load | |
![]() |
![]() |
| With line anchor | |
![]() |
![]() |
How to set up and validate locally
- Open any CI job with a long log (enough lines to overflow the viewport). A running or finished job both work, e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/389
- On page load, confirm the log is scrolled to the bottom (newest lines visible), not stuck at the top.
- Open the same job with a line anchor in the URL, for example append
#L10. Confirm the page scrolls to that line near the top and does NOT jump to the bottom, e.g. https://gdk.test:3000/flightjs/Flight/-/jobs/389#L1500
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability. Please review the MR acceptance checklist.



