diff --git a/website/src/tailwind.css b/website/src/tailwind.css index 9a371cd..71f5988 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; @@ -335,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) { @@ -429,6 +444,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;