docs: fix mobile horizontal scroll via contain:layout

The real culprit was Chrome mobile's layout-viewport auto-expansion.
Even when wide content (the comparison table, long code lines) sat
inside an overflow-x:auto wrapper, mobile browsers still measured the
descendant's intrinsic width when sizing the layout viewport — which
expanded from device-width to ~2× device-width and dragged the fixed
nav header along with it. Applying `contain: layout` to every
overflow-x:auto wrapper inside <main> isolates the wrapper's intrinsic
width from the layout-viewport calculation while keeping the inner
horizontal scroll intact.

Verified via Playwright at 375×800 with isMobile:true:
- before: window.innerWidth = 776, html.scrollWidth = 776
- after: window.innerWidth = 375, html.scrollWidth = 375

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: seanghay

docs/app/app.css

@@ -20,6 +20,12 @@
 
 html {
   scrollbar-gutter: stable;
+  /* Disable mobile auto-text-inflation. Without this, Chrome mobile (and
+     mobile-emulation in DevTools) scales font sizes up in columns it deems
+     "too narrow," pushing content wider than the viewport even when desktop
+     narrow-width rendering is fine at the same pixel width. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 /* Stop the document itself from scrolling horizontally. Inner elements with
@@ -52,6 +58,28 @@ main > * {
   overflow-x: hidden;
 }
 
+/* Cascade min-width:0 to every descendant. Flex/grid children default to
+   `min-width: auto`, refusing to shrink below their content's intrinsic
+   min-width — that's what lets a long unbreakable line in a deep grid cell
+   blow out the whole page on mobile. Setting this universally is safe
+   because elements with explicit `width` still keep their width. */
+main * {
+  min-width: 0;
+}
+
+/* The real mobile-overflow culprit. Even with overflow-x:auto wrappers,
+   Chrome mobile (and DevTools mobile emulation) still measures intrinsic
+   content width when computing the layout viewport — a wide table or
+   long code line inside an overflow:auto wrapper can expand the layout
+   viewport from device-width to ~2× device-width, which then makes the
+   fixed nav header span the larger viewport and produce horizontal
+   scroll. `contain: layout` isolates the wrapper's layout from the
+   parent's layout-viewport calculation while leaving overflow:auto
+   scrolling intact. */
+main .overflow-x-auto {
+  contain: layout;
+}
+
 body {
   font-family: var(--font-sans);
 }