Background
Spacing from .mw-content-container and .mw-body is responsible for aligning the main content with the icons buttons in the header. However, the existing spacing styles never aligned them precisely, and also introduces a lot of CSS complexity in the collapsed TOC and grid code. This task is for improving the alignment between the header icons and the main content while simplify our CSS to be more reliable to debug and work with.
Before (note the alignment):
After:
Noticed while working on T314579, and related to T315615.
AC
- Main menu button and user menu dropdown button in header is aligned with rest of page content on smaller viewports (roughly below 1100px, specifically before and after the transition to tablet viewports)
- Sticky header spacing matches header, i.e. main menu button in header is aligned with the search button in the sticky header, and user menu button in header is aligned with user menu button in sticky header
- Collapsed TOC styles are cleaned up
- Grid styles are cleaned up
Expected visual changes
- Below 1000px should see changes in the main menu button and user dropdown button, the content should remain the same
- Above 1000px should see changes to the right spacing of the page titlebar and toolbar on pages with TOC
Developer notes
Originally mw-body had a consistent left and right padding of 0.5em. Combined with the left and right paddings on mw-page-container, these styles provided adequate spacing for the page content on the left and right. However, the left padding on mw-body caused problems when we introduced the grid, so it was removed and placed on mw-content-container instead. This quick fix caused the spacing to behave differently across viewports. This leads to more code complexity and fragility in our CSS, especially for the collapsed TOC menu which relies on absolute positioning.
We can improve the alignment and reduce CSS complexity with the following steps:
- Remove left and right padding from mw-body and .mw-content-container
- Add the left and right padding from mw-body and .mw-content-container to mw-page-container, ensuring the total spacing at the end remains the same
- Add -0.75em left and right margins to mw-header below tablet viewports to ensure alignment between header icons and content
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T315261#8246962 |
