From 906f5290717d47117bb6db8baa4b85c51a8cac4e Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Fri, 10 Apr 2026 16:49:11 -0700
Subject: [PATCH] fix(website): prevent mobile horizontal overflow on docs
 pages

- docs-prose: add max-width: 100% to prose container and direct children
- rehype-pretty-code figure: max-width + overflow hidden
- CodeBlock Pre wrapper: max-width + overflow hidden, pre gets overflow-x auto
- tables: display block + overflow-x auto for horizontal scroll

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/website/src/app/global.css                    | 7 +++++--
 apps/website/src/components/docs/mdx/CodeBlock.tsx | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index 42a4a63f2..ad8b77ecd 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -86,6 +86,8 @@ html {
 /* rehype-pretty-code — docs code blocks */
 .docs-prose [data-rehype-pretty-code-figure] {
   margin: 1.5rem 0;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .docs-prose [data-rehype-pretty-code-figure] pre {
@@ -135,7 +137,8 @@ html {
   font-weight: 400;
 }
 
-.docs-prose { overflow-wrap: break-word; word-break: break-word; }
+.docs-prose { overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
+.docs-prose > * { max-width: 100%; }
 .docs-prose h1 { font-size: 1.875rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; font-family: var(--font-garamond); }
 .docs-prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; font-family: var(--font-garamond); }
 .docs-prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; font-family: var(--font-garamond); }
@@ -143,7 +146,7 @@ html {
 .docs-prose ul, .docs-prose ol { margin-bottom: 1.25rem; }
 .docs-prose li { margin-bottom: 0.25rem; }
 
-.docs-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 1.5rem 0; }
+.docs-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 1.5rem 0; display: block; overflow-x: auto; }
 .docs-prose th { text-align: left; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; color: #8b8fa3; border-bottom: 1px solid rgba(0, 64, 144, 0.15); }
 .docs-prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0, 64, 144, 0.08); color: #555770; }
 .docs-prose td code { font-size: 0.8em; }
diff --git a/apps/website/src/components/docs/mdx/CodeBlock.tsx b/apps/website/src/components/docs/mdx/CodeBlock.tsx
index fbb857710..702468cb9 100644
--- a/apps/website/src/components/docs/mdx/CodeBlock.tsx
+++ b/apps/website/src/components/docs/mdx/CodeBlock.tsx
@@ -30,8 +30,8 @@ export function Pre({ children, ...props }: React.HTMLAttributes<HTMLPreElement>
   };
 
   return (
-    <div style={{ position: 'relative' }}>
-      <pre ref={ref} {...props}>{children}</pre>
+    <div style={{ position: 'relative', maxWidth: '100%', overflow: 'hidden' }}>
+      <pre ref={ref} {...props} style={{ ...((props as Record<string, unknown>).style as React.CSSProperties), overflowX: 'auto' }}>{children}</pre>
       <button
         onClick={copy}
         aria-label={copied ? 'Copied' : 'Copy code'}