Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Header & sidebar toggle on mobile - styling cleanup

See original GitHub issue

Is your proposal related to a problem?

Currently the header layout relies on a mix of floats and position absolute to ensure that it has the correct column layout and also so that it does not overlap with the sidebar ‘small’ variant (a single absolute positioned button).
Also, as noted, the sidebar relies on absolute positioning when on small screens, this is actually not working correctly on Safari and the content comes down part way on the screen.
Finally, these two issues create some potential problems when there is a page message (error/success) on small devices.

Describe the solution you’d like

For the header, it would be good to avoid floats, we can now reliably use CSS grid OR CSS Flexbox to achieve the column layout, this also makes it easier to adopt RTL styles in more places.
For the sidebar positioning, find a way to either avoid the absolute positioning OR ensure that the styles required for the header content are not having to be duplicated in every variant of the header (slim header, breadcrumbs if present etc - all need a 50px gap just in case).
It might also be good to review the page wide padding left/right on reports page of 50px - it is likely this was added just to work around the side bar issue on small devices.

Describe alternatives you’ve considered

Leave as is, it is mostly working right now, just very hard to maintain and super easy for new code to cause problems where the sidebar button is shown ‘over’ any header content.

Additional context or ideas

Not sure if it is possible, but ideally the sidebar button would be positioned ‘inline’ inside the header container so that all other header content wraps around it.
Maybe the header element needs to move in the DOM to account for the sidebar content being there and then it contains a fixed side margin or padding on small devices to account for the sidebar toggle position.

Requirements

Replace any floats & clear usage in the shared header styling with either flexbox or css grid
Remove all position absolute usage in the shared header AND slim header, remove the padding left 50px set throughout header items including breadcrumbs & then ensure the sidebar toggle still shows correctly with not overlapping header content.
Set up a variable, if needed, for the sidebar toggle, so that if we do still need that 50px value - we are not hard-coding it everywhere, but have it linked to a SCSS variable for tracing the ‘purpose’ of this.
Remove the side 50px padding on report pages but still ensure content shows correctly
Resolve any styling conflicts when page messages exist (top of page) - may just be Safari - check the Styleguide screenshot above for a reference