Skip to content

Update build sticky items with height variable for top position

Scott de Jonge requested to merge 403579-build-height-variable into master

What does this MR do and why?

!114984 (merged) introduces new $calc-application-header-height, $calc-application-footer-height, and $calc-application-viewport-height variables which use calc() to calculate heights based on the conditional presence of system header, system footer, performance bar, and header.

Changes

Update build sticky items with height variable for top position

  • Use $calc-application-header-height variable for top property
  • Remove redundant -webkit-sticky useragent prefix property value

Screenshots or screen recordings

Variant Before After
All 127.0.0.1_3000_flightjs_Flight_-jobs_675__3 127.0.0.1_3000_flightjs_Flight_-_jobs_675
Sticky header 127.0.0.1_3000_flightjs_Flight_-jobs_675__2 127.0.0.1_3000_flightjs_Flight_-jobs_675__1
Performance bar 127.0.0.1_3000_flightjs_Flight_-_jobs_675 127.0.0.1_3000_flightjs_Flight_-jobs_675__3
None 127.0.0.1_3000_flightjs_Flight_-jobs_675__1 127.0.0.1_3000_flightjs_Flight_-jobs_675__2

How to set up and validate locally

  1. Enable system header message in admin settings
  2. Toggle the performance bar with p + b
  3. Visit build view e.g. http://127.0.0.1:3000/flightjs/Flight/-/jobs/675
  4. Ensure top position is correct for sticky headers

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #403579 (closed)

Merge request reports