Update to use height variables for sticky positions and heights
What does this MR do and why?
Fix top position for sticky headers when system-header is visible.
!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.
These changes apply $calc-application-header-height
, $calc-application-footer-height
, and $calc-application-viewport-height
to the sticker header in issues, merge-requests, and epics.
Note: Issues, merge-requests, and epics share the same underlying styles for .issue-sticky-header
. Decoupling these styles is beyond the scope of this work.
Changes
- Update issues, merge-request, and epics sticky header
top
position - Use
$calc-application-header-height
variable - Update diff-tree-view
height
value - Use
$calc-application-viewport-height
variable - Remove redundant
--initial-top
and--top
custom properties - Update startup CSS stylesheets
Screenshots or screen recordings
Download all screenshots: sitcky-header-positions.zip
Merge request
Sticky header and discussion diff-title
Variant | Before | After |
---|---|---|
All | ||
Sticky header | ||
Performance bar | ||
None |
Sticky header, diff-tree, and diff-title
Variant | Before | After |
---|---|---|
All | ||
Sticky header | ||
Performance bar | ||
None |
Issue
Variant | Before | After |
---|---|---|
All | ||
Sticky header | ||
Performance bar | ||
None |
Epic
Variant | Before | After |
---|---|---|
All | ||
Sticky header | ||
Performance bar | ||
None |
How to set up and validate locally
- Enable system header/footer messages in admin settings
- Toggle the performance bar with p + b
- Visit the following pages
- Ensure sticky header (and diff trees and titles) are stuck to the correct top position
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #403579 (closed)