Skip to content

fix(nav): wrap header links on narrow viewports - #47

Merged
TimeToBuildBob merged 1 commit into
masterfrom
fix/mobile-nav-overflow-903e
Sep 8, 2026
Merged

fix(nav): wrap header links on narrow viewports#47
TimeToBuildBob merged 1 commit into
masterfrom
fix/mobile-nav-overflow-903e

Conversation

@TimeToBuildBob

Copy link
Copy Markdown
Owner

Why

The site header is a single nowrap flex row of six links. At a 390px viewport the document grew to ~510px (Projects ended at 436px, Wiki at 510px), so the page scrolled sideways even when the article itself fit. Reproduced while verifying the cancellation post; this is a layout bug, not a post issue.

Change

In assets/css/tailwind.css (source; styles.css is generated):

  • flex-wrap so extra links drop to the next row instead of stretching the page
  • whitespace-nowrap on each link so labels stay intact
  • Slightly tighter row gap on small screens (gap-x-4 gap-y-2, sm:gap-6)

Verification

Playwright against the local Jekyll build (system Chrome, pages fulfilled from _site, no live deploy). Overflow = documentElement.scrollWidth - innerWidth.

Page Viewport Overflow Nav Links
/, /blog/, /about/, /projects/, /wiki/ 390×844 0 wraps; Projects+Wiki on row 2 all 6 visible
same 320×568 0 wraps; Blog+Projects+Wiki on row 2 all 6 visible
same 1280×800 0 single row (64px tall) all 6 visible

Desktop layout is unchanged: one row, same order, every link reachable.

Notes

  • Does not touch the cancellation-post worktree or PR.
  • Generated assets/css/styles.css is gitignored; CI rebuilds CSS on make build.

The six-item header stayed on one nowrap flex row, so a 390px viewport
expanded to ~510px (Projects at 436px, Wiki at 510px). Allow wrapping
and keep each link intact so mobile pages no longer scroll sideways.

Git-Session-Id: 903e
@TimeToBuildBob

Copy link
Copy Markdown
Owner Author

Local verification (system Chrome, _site fulfilled, no live deploy):

  • 390×844: overflow 0, nav wraps, Projects + Wiki on row 2, all 6 links visible
  • 320×568: overflow 0, Blog + Projects + Wiki on row 2, all 6 links visible
  • 1280×800: overflow 0, single 64px row, all 6 links reachable

Will squash-merge once CI is green, then re-check the deployed header.

@TimeToBuildBob

TimeToBuildBob commented Sep 8, 2026

Copy link
Copy Markdown
Owner Author

🤖 AI code review

Safe to merge — no P0/P1 findings

Confidence 5/5

No findings. The diff looks correct to me on this pass.

Reviewed a2eb0c13033e · openrouter/deepseek/deepseek-v4-flash-0731 · llm (in-band) engine · 47s · about this reviewer

Maintainer commands

@TimeToBuildBob review (own line) — fresh review · @TimeToBuildBob fix — a worker acts on the findings. Once per comment; 👀 = received.

@TimeToBuildBob
TimeToBuildBob merged commit 5f8f261 into master Sep 8, 2026
1 check passed
@TimeToBuildBob
TimeToBuildBob deleted the fix/mobile-nav-overflow-903e branch September 8, 2026 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant