Uh oh!
There was an error while loading. Please reload this page.
fix: harden responsive layout for narrow viewports - #11
Merged
Conversation
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>
Deploying coveragetracker-dev with |
| 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 |
- 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>
Uh oh!
There was an error while loading. Please reload this page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Address overflow, clipping, and navigation issues that appeared below ~768px, down through 344px, reported iteratively from device-width screenshots.
Docs content
remark-inline-code-breaksplugin 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.overflow-wrap: break-word(so<wbr>slash hints win); table code usesoverflow-wrap: normal.paddinghad zeroed it).Calloutwraps children in a<div>to avoid invalid<p>-in-<p>nesting (SSR warning).Navigation
.topbar'sbackdrop-filtercontaining block doesn't collapse the fixed overlay.Hero
minmax(0, …)tracks,min-width: 0on the meta column, andoverflow-wrapon the repo slug so it wraps instead of forcing the layout wider than the viewport.Verification
pnpm check— 0 errors / 0 warningspnpm build— cleanpnpm test— 41 passing (added coverage for table wrapping incl. hand-written HTML + double-wrap guard,<wbr>injection, and the double-escape guard)🤖 Generated with Claude Code