New nav: Fix syntax highlighting on Compare View
What does this MR do and why?
Similar to !112605 (merged) where we fixed the syntax highlighting in the Commit View, this fixes the syntax highlighting on the compare view.
However we are also changing the approach of how we calculate the "top"
of the sticky element. Rather than doing some calculation based on the
height of the navbar (and the existence of perfbar), we use the
paddingTop
property CSS value of the .layout-page
element. The
reason behind this: We put a lot of effort in setting the padding
correctly.
Screenshots or screen recordings
Before | After |
---|---|
Video of the interaction after:
Screen_Recording_2023-04-05_at_14.27.17
How to set up and validate locally
- Enable the
super_sidebar_nav
feature flag. - Go to an individial commit page / compare page with a lot of data, e.g.
- Compare:
/flightjs/Flight/-/compare/master...bbbefc71f15f11c0891399993e635b7f0d2219d4?from_project_id=6&straight=true
- Commit:
/flightjs/Flight/-/commit/bbbefc71f15f11c0891399993e635b7f0d2219d4
- Compare:
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 Lukas Eipert