Stop wide docs code blocks and tables from overflowing the page#162
Merged
Conversation
The docs shell is a flex item of the flex-column <body>. With the default min-width:auto it wouldn't shrink below its content floor (the fixed sidebar plus .docs-main's max-width), so a page whose content filled the column pushed the whole shell — and the sticky nav — past the viewport. The nav shifted horizontally between a narrow page and a wide one. Pin the shell to the viewport (width:100% + min-width:0) so .docs-main shrinks and wide code scrolls inside its own pre. Markdown tables had no styles at all and rendered at their natural content width, overflowing the page on mobile. Make them scroll horizontally within their own box like code blocks.
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
macterm | 1887851 | Commit Preview URL Branch Preview URL |
Jul 07 2026, 06:34 PM |
The content column used to hug the sidebar with all the slack on the right. Make .docs-main a centered grid track so the 760px reading column sits centered in the space to the right of the sidebar, with balanced margins. Collapses to full width on mobile (single-column shell).
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 free
to 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.
Problem
The docs site had two independent horizontal-overflow bugs:
Layout shift at mid-range widths (~769–1180px).
.docs-shellis a flex item of thedisplay:flex<body>column. With its defaultmin-width: auto, flexbox refused to shrink it below its content floor (fixed 212px sidebar + gap +.docs-main's 760px max-width), so a page whose content filled the column pushed the whole shell — and the sticky nav — past the viewport. Narrow pages fit, wide ones didn't, so the nav jumped horizontally between pages.Mobile break. Markdown tables (in the Remote projects and CLI pages) had no CSS at all and rendered at their natural content width, blowing the page out ~138px past a 375px viewport. The code blocks were already fine — they scroll inside their own
<pre>.Fix
CSS-only, in
website/src/tailwind.css:.docs-shell— addwidth: 100%; min-width: 0; box-sizing: border-boxso it's pinned to the viewport and.docs-main(alreadymin-width: 0) can shrink. Wide code then scrolls inside its own<pre>(overflow-x: auto) instead of shifting the page..prose-docs table—display: block; max-width: 100%; overflow-x: autoso a too-wide table scrolls within its own box like a code block, plus basic cell styling to match the docs' look.Verification
Measured the DOM and screenshotted at 375, 900, 935, and 1440px:
document.scrollWidth === viewport)..docs-mainat 760px — no regression.The built
public/tailwind.cssis a gitignored artifact regenerated by the build, so only the source CSS is committed.