Visual QA + polish: nav wrap bug, mobile spacing #49

New issue

Closed

opened 2026-02-27 17:59:05 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-02-27 17:59:05 +00:00

Owner

Plan

plan-2026-02-27-responsive-design-mobile-ux — Phase 3

Repo

pal-e-docs — the repo where the code change happens

User Story

As a visitor viewing pal-e-docs on a mobile device
I need the nav to render as a clean 3-row layout and sections to have proper breathing room
So that the site looks professionally designed, not just "not broken"

Acceptance Criteria

When I view any page at 375px viewport width
Then the nav renders as 3 rows: brand / nav links / auth
And sections have consistent vertical spacing
And no horizontal overflow exists on any page type
And all existing playwright tests pass with no regressions

Additional Information

Nav wrap bug: At 375px, brand stays on the same line as Home/Projects/Repos, then Tags + Login wrap to row 2. The flex-basis: 100% on .brand in the mobile breakpoint isn't forcing a line break.
Mobile spacing: Margins between .section divs feel tight. Need consistent vertical rhythm.
Must verify all page types at 375px and 1280px: landing, note (tables, mermaid, code blocks), project listing, project detail, repo listing, tag listing, tag detail, login.
Must verify no regressions to mermaid rendering, lightbox, auto-linked slugs.

Checklist

PR opened with related notes
Tests cover the acceptance criteria
Docs updated if needed

project-pal-e-docs — parent project
issue-pal-e-docs-visual-qa-polish — pal-e-docs tracking note

### Plan `plan-2026-02-27-responsive-design-mobile-ux` — Phase 3 ### Repo `pal-e-docs` — the repo where the code change happens ### User Story As a visitor viewing pal-e-docs on a mobile device I need the nav to render as a clean 3-row layout and sections to have proper breathing room So that the site looks professionally designed, not just "not broken" ### Acceptance Criteria When I view any page at 375px viewport width Then the nav renders as 3 rows: brand / nav links / auth And sections have consistent vertical spacing And no horizontal overflow exists on any page type And all existing playwright tests pass with no regressions ### Additional Information - **Nav wrap bug:** At 375px, brand stays on the same line as Home/Projects/Repos, then Tags + Login wrap to row 2. The `flex-basis: 100%` on `.brand` in the mobile breakpoint isn't forcing a line break. - **Mobile spacing:** Margins between `.section` divs feel tight. Need consistent vertical rhythm. - Must verify all page types at 375px and 1280px: landing, note (tables, mermaid, code blocks), project listing, project detail, repo listing, tag listing, tag detail, login. - Must verify no regressions to mermaid rendering, lightbox, auto-linked slugs. ### Checklist - [ ] PR opened with related notes - [ ] Tests cover the acceptance criteria - [ ] Docs updated if needed ### Related - `project-pal-e-docs` — parent project - `issue-pal-e-docs-visual-qa-polish` — pal-e-docs tracking note