Skip to content

fix: harden responsive layout for narrow viewports#11

Merged
tbjers merged 2 commits into
mainfrom
fix/responsive-narrow-viewport
Jul 3, 2026
Merged

fix: harden responsive layout for narrow viewports#11
tbjers merged 2 commits into
mainfrom
fix/responsive-narrow-viewport

Conversation

@tbjers

@tbjers tbjers commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

Address overflow, clipping, and navigation issues that appeared below ~768px, down through 344px, reported iteratively from device-width screenshots.

Docs content

  • Wrap deftables in a horizontally-scrollable container; Command-column code now word-wraps (extending the scrollable table) instead of breaking mid-word.
  • New remark-inline-code-breaks plugin injects <wbr> after each slash in inline-code paths, so long paths break on separators (not mid-token) without double-escaping shell metacharacters. Site-only — the downstream docs export does not run remark plugins, so generated markdown is unaffected.
  • Prose inline code uses overflow-wrap: break-word (so <wbr> slash hints win); table code uses overflow-wrap: normal.
  • Hanging indent on ordered lists so wrapped content aligns under the first line.
  • Fix the docs header losing horizontal padding at 768px (a shorthand padding had zeroed it).
  • Callout wraps children in a <div> to avoid invalid <p>-in-<p> nesting (SSR warning).

Navigation

  • Add a burger menu (full-screen overlay, rendered as a body-level sibling) for the nav links when the inline links collapse at ≤760px.
  • Hide the brand label and shorten the theme picker to color dots on the narrowest screens; switch the GitHub link to the Octocat icon.
  • Center the controls in a three-zone grid at ≤760px.
  • Theme-picker menu becomes a full-screen overlay on small screens, sized with viewport units so .topbar's backdrop-filter containing block doesn't collapse the fixed overlay.

Hero

  • Fix a grid blowout that clipped the CTA buttons and the "Works with" strip: minmax(0, …) tracks, min-width: 0 on the meta column, and overflow-wrap on the repo slug so it wraps instead of forcing the layout wider than the viewport.

Verification

  • pnpm check — 0 errors / 0 warnings
  • pnpm build — clean
  • pnpm test — 41 passing (added coverage for table wrapping incl. hand-written HTML + double-wrap guard, <wbr> injection, and the double-escape guard)
  • Confirmed visually at narrow viewports (344px–768px)

🤖 Generated with Claude Code

Address several overflow, clipping, and navigation issues that appeared
below ~768px, down through 344px.

Docs content:
- Wrap deftables in a horizontally-scrollable container and let Command-
  column code word-wrap (extending the scrollable table) instead of
  breaking mid-word; move the table margin to the wrapper.
- New remark-inline-code-breaks plugin injects <wbr> after each slash in
  inline-code paths so long paths break on separators, not mid-token,
  without double-escaping shell metacharacters. Site-only: the downstream
  export does not run remark plugins.
- Prose inline code uses overflow-wrap: break-word so <wbr> slash hints win;
  table code uses overflow-wrap: normal to word-wrap.
- Hanging indent on ordered lists so wrapped content aligns under the text.
- Fix the docs header losing horizontal padding at 768px (shorthand padding
  had zeroed it).
- Callout wraps children in a <div> to avoid invalid <p>-in-<p> nesting.

Navigation:
- Add a burger menu (full-screen overlay, body-level sibling) for the nav
  links when the inline links collapse at <=760px.
- Hide the brand label and shorten the theme picker to color dots on the
  narrowest screens; switch the GitHub link to the Octocat icon.
- Center the controls in a three-zone grid at <=760px.
- Theme picker menu becomes a full-screen overlay on small screens; size it
  with viewport units so .topbar's backdrop-filter containing block does not
  collapse the fixed overlay.

Hero:
- Fix grid blowout clipping the CTA buttons and the "Works with" strip: use
  minmax(0, ...) tracks, min-width: 0 on the meta column, and overflow-wrap
  on the repo slug so it wraps instead of forcing the layout wider than the
  viewport.

Tests: cover table wrapping (pipe + hand-written HTML + double-wrap guard),
<wbr> injection, and the double-escape guard. 41 passing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 3, 2026

Copy link
Copy Markdown

Deploying coveragetracker-dev with  Cloudflare Pages  Cloudflare Pages

Latest commit: bac3b65
Status: ✅  Deploy successful!
Preview URL: https://d5b5e45d.coveragetracker-dev.pages.dev
Branch Preview URL: https://fix-responsive-narrow-viewpo.coveragetracker-dev.pages.dev

View logs

- Match the brand tile to the 38px control buttons in the icon-only nav; give
  the GitHub link the same outlined-button footprint as the burger.
- Use the 2026 GitHub Invertocat and pin its fill to a mode-keyed gray
  (never the theme hue) per GitHub brand rules, with black/white hover.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@tbjers tbjers merged commit d21b475 into main Jul 3, 2026
2 checks passed
@tbjers tbjers deleted the fix/responsive-narrow-viewport branch July 3, 2026 20: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