Updated merge request header to use scroll-state

Phil Hughesrequested to merge
ph/mrStickyHeaderScrollState into master

What does this MR do and why?

Updates the merge request sticky header to use the @container scroll-state(stuck: top) CSS container query. This allows us to remove the duplicated sticky header Vue app and instead just have the 1 header that gets styled correctly when it is stuck to the top.

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_conditional_rules/Container_scroll-state_queries

References

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Visit any merge request page, for example: http://127.0.0.1:3000/namespace/project/-/merge_requests/1
  2. Observe that there is only one header that changes its appearance when it sticks to the top of the page
  3. If your browser doesn't support CSS container queries, you'll see the old behavior with two separate headers

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.

Merge request reports