T3486 mycompassion homepage spacing - #405
Conversation
#o_main_nav (logo, language switcher) inherited the plain .container class, which is intentionally flush edge-to-edge above 640px. Wire up the existing but unused .container--header modifier onto the header row instead of touching the shared .container class, giving it a permanent gutter so the logo and language switcher no longer sit flush against the window border.
The bottom bar's justify-content-center was already correct, but the policy-link/social-icons/contact items still carried one-sided me-3/ ms-3 margins that threw off their visual centering once they stacked into a column on mobile. Scope those margins to the row layout (md and up) and use vertical margin between the stacked items instead.
The address/phone/email rows stack into a column below lg, but had no gap between them, and their icon-to-label spacing was too tight once stacked instead of inline.
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| > | ||
| <div | ||
| class="py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center justify-content-center" | ||
| class="mb-3 mb-md-0 py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center justify-content-center" |
There was a problem hiding this comment.
From 768px to 991px, the address, phone, and email still stack vertically, but mb-md-0 removes the new margin between them. Their padding keeps them readable, though they appear more crowded than on narrower screens. This is a non-blocking visual issue; keep the margin until the rows become horizontal.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Artifacts
- The authored Playwright script extracts both revisions’ contact classes and renders their Bootstrap-utility approximation at six viewport widths; it identifies the executed source.
- Chromium rendered the pre-PR classes, emphasizing tablet widths where the stacked rows have no added margin.
Pre-PR footer contacts at 900px
- A Chromium poster frame shows the isolated pre-PR stacked contacts at 900px with their measured row spacing.
- Chromium rendered the changed classes, emphasizing the 768–991px interval where the new margin is canceled while contacts remain stacked.
Changed footer contacts at 900px
- A Chromium poster frame shows the changed stacked contacts at 900px with zero margin between row boxes.
- Captured command output records the working directory, extracted classes, computed gaps at all six widths, and exit code 0; it confirms the breakpoint-specific difference.
Comments Outside DiffThese findings sit on lines the diff does not cover, so they could not be posted inline. Each one leaves this list once its file changes.
|
2 participants
T3486 — Fix failing quality test: MyCompassion: homepage
Original report
Two issues on the MyCompassion homepage: (1) no space between the window border and the logo/language switcher in the header, and (2) on phone mode (or responsive mode more likely), the footer elements should be aligned center.
How to test manually
-u theme_compassion_2025) — pure view/SCSS changes hot-reload under--dev=all, no upgrade required for those alone./my2/dashboardor any page using the shared header/footer) at a normal desktop width — the logo and language switcher should now sit with visible padding from the window edge instead of touching it.