From 4164ca38772180484eb954ae4a225c9250b97fec Mon Sep 17 00:00:00 2001 From: Ethan Lee Date: Wed, 8 Jul 2026 03:30:23 +0900 Subject: [PATCH 1/2] Stop wide docs code blocks and tables from overflowing the page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The docs shell is a flex item of the flex-column . 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. --- website/src/tailwind.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/website/src/tailwind.css b/website/src/tailwind.css index 9a371cd..64502c5 100644 --- a/website/src/tailwind.css +++ b/website/src/tailwind.css @@ -293,10 +293,19 @@ .docs-shell { display: flex; gap: clamp(28px, 5vw, 64px); + width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--site-gutter); align-items: flex-start; + /* The shell is a flex item of the column; without min-width:0 its + flex min-content floor (fixed sidebar + main's max-width) keeps it from + shrinking to the viewport, so a wide code block would push the whole + shell — and the sticky nav — sideways. width:100% + min-width:0 pins it + to the viewport and lets .docs-main shrink; wide code scrolls inside its + own pre (overflow-x:auto) instead of shifting the page. */ + min-width: 0; + box-sizing: border-box; } .docs-sidebar { position: sticky; @@ -429,6 +438,34 @@ border-top: 1px solid rgba(23, 21, 15, 0.14); margin: 52px 0; } + /* Tables: never wider than the content column. A table whose cells don't fit + scrolls horizontally within its own box (like code blocks) instead of + pushing the page sideways — the mobile-overflow bug. `display:block` on the + table makes overflow-x:auto take effect (an unwrapped table ignores it). */ + .prose-docs table { + display: block; + width: 100%; + max-width: 100%; + overflow-x: auto; + border-collapse: collapse; + margin: 0 0 20px; + font-size: 14.5px; + line-height: 1.5; + } + .prose-docs th, + .prose-docs td { + text-align: left; + vertical-align: top; + padding: 8px 14px 8px 0; + border-bottom: 1px solid rgba(23, 21, 15, 0.1); + } + .prose-docs th { + font-weight: 600; + color: var(--color-ink); + } + .prose-docs td { + color: var(--color-body); + } .prose-docs blockquote { border-left: 2px solid rgba(23, 21, 15, 0.35); padding: 2px 0 2px 16px; From 1887851955074c1532afc0015d83bc695d0d4a8f Mon Sep 17 00:00:00 2001 From: Ethan Lee Date: Wed, 8 Jul 2026 03:33:45 +0900 Subject: [PATCH 2/2] Center the docs reading column beside the left-pinned sidebar 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). --- website/src/tailwind.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/website/src/tailwind.css b/website/src/tailwind.css index 64502c5..71f5988 100644 --- a/website/src/tailwind.css +++ b/website/src/tailwind.css @@ -344,10 +344,16 @@ color: var(--color-ink); font-weight: 600; } + /* The sidebar stays pinned left (flex:none); .docs-main fills the rest of the + row and centers its 760px reading column within that space (via the auto + side margins on the inline-size track), so the content sits centered in the + area to the right of the sidebar rather than hugging it. */ .docs-main { flex: 1; min-width: 0; - max-width: 760px; + display: grid; + grid-template-columns: minmax(0, 760px); + justify-content: center; padding: 40px 0 120px; } @media (max-width: 768px) {