fix(site): stop docs tables overflowing and showing through sticky bars

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;

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);