Keep MR flash alerts clear of the sticky header

What does this MR do and why?

This MR changes how flash alerts behave on the merge request page:

• Before the header sticks, the alert stays in its normal spot and scrolls with the page, under the panel border like other content.
• Once the header sticks, the alert sticks just below it:
  • Overview: limited to the discussion column, so it doesn't cover the sidebar.
  • Changes: full width, matching the fluid header.
• Changes tab, before the header sticks: the alert now matches the fixed layout body width, the same as on Overview.

The flash container sits outside the sticky header, so it can't use the header's scroll-state(stuck: top) container query. A small IntersectionObserver (sticky_header_stuck_state.js) adds is-sticky-header-observed and is-sticky-header-stuck classes to the flash container instead. The styles only apply where that observer runs, so other pages that load the same stylesheet keep the normal sticky flash. One example is the New merge request page.

Note: This only covers browsers that support container-type: scroll-state. Firefox uses the Vue sticky_header.vue fallback, which this MR doesn't change.

References

#631663 (comment 3956028402)

Screenshots or screen recordings

How to set up and validate locally

1. In Chrome, open any merge request with a comment link that doesn't exist, for example /<project>/-/merge_requests/<iid>#note_9999999. An info alert appears at the top.
2. Scroll down on the Overview tab:
   • The alert scrolls away with the page and passes under the panel border.
   • Once the sticky header appears, the alert shows up just below it, within the discussion column and clear of the sidebar.
3. Go to the Changes tab and scroll. Once the header sticks, the alert spans the full diff width.
4. With Preferences > Layout width set to Fixed, switch between Overview and Changes at the top of the page. The alert keeps the same width.
5. On the New merge request page, flash alerts still stick to the top as before.

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.