From a0f410b0399ee44bbec3a70e537affaf0b38d67c Mon Sep 17 00:00:00 2001
From: William Zujkowski <williamzujkowski@gmail.com>
Date: Wed, 1 Apr 2026 08:07:41 -0400
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20critical=20mobile=20fixes=20?=
 =?UTF-8?q?=E2=80=94=20overflow,=20indentation,=20sticky=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Prevent horizontal overflow: overflow-x: hidden on html/body
- Aggressive list indentation reduction (0.75/0.5/0.375rem for levels 2/3/4)
- Make sticky section headers non-sticky on mobile (saves screen space)
- Remove left padding from title TOC section lists on mobile
- Reduce scroll-margin-top to 2rem (headers non-sticky on mobile)
- Scale images/embeds to max-width: 100%
- Widen prose to 95vw on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/src/styles/global.css | 45 ++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index ae6c687..274e9f9 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -135,27 +135,56 @@
   word-break: break-word;
 }
 
-/* Mobile prose — tighter width, reduced nesting */
+/* Prevent horizontal overflow globally */
+html, body {
+  overflow-x: hidden;
+}
+
+main, article, section {
+  min-width: 0;
+}
+
+/* Mobile — comprehensive fixes */
 @media (max-width: 768px) {
   .prose {
-    max-width: min(92vw, 65ch);
+    max-width: min(95vw, 65ch);
   }
 
-  /* Reduce nested list indentation on narrow screens */
+  /* Reduce nested list indentation aggressively */
   .prose ul ul {
-    padding-left: 1rem;
+    padding-left: 0.75rem;
+    margin-left: 0;
   }
   .prose ul ul ul {
-    padding-left: 0.75rem;
+    padding-left: 0.5rem;
   }
   .prose ul ul ul ul {
-    padding-left: 0.5rem;
+    padding-left: 0.375rem;
   }
 
-  /* Anchor link clearance for sticky header on mobile */
+  /* Title browse — section lists in expanded chapters */
+  #title-toc ul {
+    padding-left: 0;
+  }
+  #title-toc li a {
+    padding-left: 0.75rem;
+  }
+
+  /* Anchor link clearance */
   [id^="section-"],
   [id^="subsec-"] {
-    scroll-margin-top: 5rem;
+    scroll-margin-top: 2rem;
+  }
+
+  /* Make sticky section headers non-sticky on mobile to save space */
+  .sticky-section-header {
+    position: relative;
+  }
+
+  /* Ensure images/embeds scale */
+  img, video, iframe {
+    max-width: 100%;
+    height: auto;
   }
 }