Skip to content

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
Screenshot_2023-04-05_at_14.44.55 Screenshot_2023-04-05_at_14.44.32

Video of the interaction after:

Screen_Recording_2023-04-05_at_14.27.17

How to set up and validate locally

  1. Enable the super_sidebar_nav feature flag.
  2. 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

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Lukas Eipert

Merge request reports