Skip to content

Update to use height variables for sticky positions and heights

Scott de Jonge requested to merge 403579-merge-requests-height-variables into master

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 mr-1-all-before mr-1-all-after
Sticky header mr-1-sh-before mr-1-sh-after
Performance bar mr-1-pb-before mr-1-pb-after
None mr-1-none-before mr-1-none-after

Sticky header, diff-tree, and diff-title

Variant Before After
All mr-2-all-before mr-2-all-after
Sticky header mr-2-sh-before mr-2-sh-after
Performance bar mr-2-pb-before mr-2-pb-after
None mr-2-none-before mr-2-none-after

Issue

Variant Before After
All issue-all-before issue-all-after
Sticky header issue-sh-before issue-sh-after
Performance bar issue-pb-before issue-pb-after
None issue-none-before issue-none-after

Epic

Variant Before After
All epic-all-before epic-all-after
Sticky header epic-sh-before epic-sh-after
Performance bar epic-pb-before epic-pb-after
None epic-none-before epic-none-after

How to set up and validate locally

  1. Enable system header/footer messages in admin settings
  2. Toggle the performance bar with p + b
  3. Visit the following pages
    1. MR discussion: http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4
    2. MR diff: http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4/diffs
    3. Issue: http://127.0.0.1:3000/flightjs/Flight/-/issues/33/
    4. Epic: http://127.0.0.1:3000/groups/flightjs/-/epics/5
  4. 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.

Related to #403579 (closed)

Edited by Scott de Jonge

Merge request reports