Set fixed-height on sticky header to prevent layout jumping

Trevor Piercerequested to merge
tpierce-565864-sticky-header into master

What does this MR do and why?

Set fixed-height on sticky header to prevent layout jumping

The sticky header being deployed at the medium breakpoint was "jumping" at a high rate if users tried to scroll while a new merge request was being created. This was deemed a layout bug and could be problematic for users with vestibular or photosenstivity issues.

The root cause of the issue was determined to be a container type scroll-state applied to a container with height: auto. Containers that do not have enough space for their content to expand or reflow can cause this visual jump.

Changelog: fixed

References

MR closes #565864 (closed)

Screenshots or screen recordings

Full header (before sticky container query) default-header-fixed-height

Sticky header (container query) sticky-container-fixed-height

How to set up and validate locally

  1. Watch the video in the related MR to see the issue at the 1:50 mark
  2. Log into GDK locally
  3. Make a quick change to a file and create a new MR
  4. While the MR is being created, try to scroll down
  5. Observe the sticky MR header "jumping" back and forth between the full view and the streamlined view

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.

Edited by Trevor Pierce

Merge request reports