fix(website): mobile hygiene — sidebar breakpoint + layout viewport constraint (#549)

* fix(docs): defer sidebar reveal to lg breakpoint

Mobile audit flagged the docs sidebar as 500–925% viewport-height sticky on tablet (768px). At that width it crowded the article and was the largest sticky/fixed offender. Pushing the reveal from md:block (768px) to lg:block (1024px) hides it for tablet/narrow-desktop and lets the article use the full width. Mobile menu's docs tab already covers nav at <lg.

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

* fix(website): constrain layout viewport on mobile

Follow-up to #547. body { overflow-x: hidden } prevents the user-visible scrollbar but doesn't stop mobile browsers from EXPANDING the layout viewport when child content (code blocks, wide grids) exceeds device-width. The fixed nav then renders at that expanded width — its right side (hamburger button) ends up clipped offscreen.

Two additions:

1. html { overflow-x: hidden } — anchors the layout viewport to the visual viewport so the fixed nav and other position:fixed elements stay aligned with what the user sees.
2. pre { max-width: 100%; overflow-x: auto } as a universal rule (was already on .shiki and .docs-prose pre; this catches any other pre that might appear in landing components without those classes).

Verified live in prod via Chrome MCP: the previous PR's body { overflow-x: hidden } and h1..h6 { word-break } are both applied; the remaining overflow numbers come from layout-viewport expansion, which this PR addresses.

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

---------

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

Author: blove

apps/website/src/app/global.css

@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 body {
   background-color: var(--color-bg);
   color: var(--color-text-primary);
@@ -14,6 +18,14 @@ body {
   overflow-x: hidden;
 }
 
+/* Code blocks scroll internally; never expand the layout viewport. */
+pre, code {
+  max-width: 100%;
+}
+pre {
+  overflow-x: auto;
+}
+
 /* Long unbreakable tokens (e.g. package names like @threadplane/chat,
  * file paths like app.config.ts) live inside marketing headings and pull
  * the layout wider than the viewport on narrow phones. Allow breaking

apps/website/src/components/docs/DocsSidebar.tsx

@@ -168,7 +168,7 @@ export function DocsSidebar({ activeLibrary, activeSection, activeSlug }: Props)
 
   return (
     <aside
-      className="w-64 shrink-0 py-6 overflow-y-auto hidden md:block"
+      className="w-64 shrink-0 py-6 overflow-y-auto hidden lg:block"
       style={{
         borderRight: `1px solid ${tokens.surfaces.border}`,
         background: tokens.surfaces.surface,