Create variables for application header, footer, and viewport heights
What does this MR do and why?
-
$calc-application-header-height: system header, performance bar, and header when present -
$calc-application-footer-heightsystem footer when present -
$calc-application-viewport-heightfull height minus system header, performance bar, header, and/or system footer when present - Update existing
top/bottom/heightusage with variables - Remove explicit
.with-performance-bar,.with-system-header, and.with-system-footerstyles - Move
.fixed-topstyle override toutilties.scss - Remove
content-wrapper-marginstyles and class usage (as per #332705 (closed))- Instead use
layout-pagewithpadding-top/padding-bottomfor fixed elements on any given page
- Instead use
Screenshots or screen recordings
| Before | After |
|---|---|
| CleanShot_2023-03-21_at_11.50.22 | CleanShot_2023-03-21_at_12.11.43 |
![]() |
![]() |
| top-position-before | top-position-after |
How to set up and validate locally
Add system header/footer messages in admin settings and review views:
- Sign in http://127.0.0.1:3000/users/sign_in
- Merge request (default) http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4/diffs
- Merge request with sticky header
Feature.enable(:moved_mr_sidebar)http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4/diffs - Issue http://127.0.0.1:3000/flightjs/Flight/-/issues/33
- Add design and open design to view fixed overlay
- Wiki create diagram http://127.0.0.1:3000/flightjs/Flight/-/wikis/home?view=create (added in !112569 (merged))
- Job with long text and sticky header within output http://127.0.0.1:3000/flightjs/Flight/-/jobs/675
- Board http://127.0.0.1:3000/groups/flightjs/-/boards
- Open board issue item and view drawer
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.
Edited by Scott de Jonge

