From 70ecc7a8c83c295f1e7f6740813222008bad26be Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 27 May 2026 10:37:35 -0700
Subject: [PATCH 1/2] fix(docs): defer sidebar reveal to lg breakpoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/website/src/components/docs/DocsSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/docs/DocsSidebar.tsx b/apps/website/src/components/docs/DocsSidebar.tsx
index 587d2d68..05f94393 100644
--- a/apps/website/src/components/docs/DocsSidebar.tsx
+++ b/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,

From c27d100b6a8ada6c65710870d50266abc97772df Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Wed, 27 May 2026 12:23:08 -0700
Subject: [PATCH 2/2] fix(website): constrain layout viewport on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/website/src/app/global.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index 76cafccf..168efc34 100644
--- a/apps/website/src/app/global.css
+++ b/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