Fix sticky header on work items and legacy issuables

Chad Lavimoniererequested to merge
479988-work-item-sticky-header-doesn-t-account-for-collapsed-nav-sidebar into master

What does this MR do and why?

When the nav sidebar is collapsed but the user is in a wide viewport, the sticky sidebar has alignment issues. This is because a sass variable with a fixed value is being used when a css variable with an updated value should be used instead.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Issue type Before After
Legacy issue (nav collapsed) gdk.test_3000_flightjs_Flight_-issues_91__3 gdk.test_3000_flightjs_Flight_-_issues_91
Legacy issue (nav and right sidebar collapsed) gdk.test_3000_flightjs_Flight_-issues_91__2 gdk.test_3000_flightjs_Flight_-issues_91__1
Work item gdk.test_3000_flightjs_Flight_-work_items_90__1 gdk.test_3000_flightjs_Flight_-_work_items_90

How to set up and validate locally

  1. Check out this branch
  2. Visit a legacy issue in the GDK
  3. make sure your viewport is very wide (use devtools to simulate a very wide viewport if necessary)
  4. collapse both the nav and the right sidebar
  5. scroll down so that the sticky header shows
  6. You will see that the sticky header content matches the width and left/right margins of the description
  7. Visit a work item
  8. (collapse the nav again and make sure you are in a very wide viewport if necessary/not already true from previous steps)
  9. scroll so that the sticky header shows
  10. You will see that the sticky header has the correct width and left/right margins

Related to #479988 (closed), #469616 (closed)

Edited by Chad Lavimoniere

Merge request reports