diff --git a/site/src/app/globals.css b/site/src/app/globals.css index 375bcb0..d0646d1 100644 --- a/site/src/app/globals.css +++ b/site/src/app/globals.css @@ -96,14 +96,6 @@ background: var(--background); color-scheme: light; text-rendering: optimizeLegibility; - /* - * Page-level zoom. The marketing page is authored almost entirely in px - * and the docs in rem, so a root font-size bump would only scale the docs. - * `zoom` scales both layouts uniformly, exactly like a browser zoom, and - * unlike `transform: scale` it keeps sticky headers and document flow intact. - * Tune this single value to taste. - */ - zoom: 1.07; } html.dark { @@ -217,6 +209,29 @@ vertical-align: top; } + /* + * Long identifiers (`contextgraph-host::wire::versions_compatible`) are a + * single unbreakable token, so they set the cell's min-content width and + * push the whole table past the viewport on narrow screens — where the + * docs grid's `overflow-x-clip` silently cuts the last column off. Let + * code, and only code, break mid-token inside table cells. + */ + .prose :where(td, th) code { + overflow-wrap: anywhere; + } + + /* + * The docs sticky chrome must be opaque. Fumadocs ships both bars at 80% + * alpha over a backdrop blur; against this near-monochrome palette the + * table rows scrolling underneath stay legible through them, so the page + * reads as a ghosted second table overlapping the real one. + */ + #nd-docs-layout #nd-subnav, + #nd-docs-layout [data-toc-popover] > header { + background: var(--background); + backdrop-filter: none; + } + .prose :where(code):not(:where(pre *, .not-prose *)) { border: 1px solid var(--border); border-radius: 0.25rem; diff --git a/site/src/app/marketing.css b/site/src/app/marketing.css index df40c3e..4f71f80 100644 --- a/site/src/app/marketing.css +++ b/site/src/app/marketing.css @@ -12,6 +12,20 @@ } .marketing-page { + /* + * Page-level zoom, scoped to the marketing layout. This page is authored + * almost entirely in px, so a root font-size bump would not scale it. + * `zoom` scales it uniformly, exactly like a browser zoom, and unlike + * `transform: scale` it keeps sticky headers and document flow intact. + * Tune this single value to taste. + * + * Deliberately NOT on `html`: media queries are evaluated against the + * unzoomed viewport, so a zoomed root makes every breakpoint fire while + * the layout actually has 1/zoom of that width to work with. The docs + * layout is responsive and breaks under that mismatch — its tables + * overflow and get clipped by the layout grid's `overflow-x-clip`. + */ + zoom: 1.07; margin: 0; background: var(--paper); color: var(--ink);