Header & sidebar toggle on mobile - styling cleanup

[lb-]

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

Related issues and PRs

• Split from initial work to unify headers UX Unification - header component with variations #8539
• On mobile viewports, banner messages push the sidebar toggle out of position #8449
• Review (and clean up) over-reliance on inset positioning in styles #8125
• Review and replace usage of float layouts in admin UI for RTL support #8126

[lb-]

Related to #8126

[lb-]

See also
#8449
#8125

[lb-]

Reviewed - this would be a great improvement to the UI as the mobile toggle causes constant issues in its current state with CSS work-arounds required for many header scenarios that only partially fix the problems.

[akshay-gupta7]

@lb- , can I get started on this

[lb-]

@akshay-gupta7 this may be quite a tricky one - unless you are very confident with CSS

[shindodkar]

@lb- is it still open

[lb-]

@shindodkar - yep, no movement on this yet.