From 4ea1ae1e4d5a082e2750fddd1aafb896427b10f5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Aug 2026 23:44:33 +0000
Subject: [PATCH] Fix mobile horizontal overflow on docs, download, and header

- docs-layout and download-grid used fixed 1fr grid tracks without
  minmax(0, 1fr), letting long code/table content blow the grid item
  past the viewport (docs and download pages scrolled ~3x screen width
  on mobile). Applied the same minmax(0, 1fr) + min-width:0 pattern
  already used by article-layout to all grid definitions.
- Long inline <code> tokens (e.g. rtmps://stream.example.com:1936/live)
  could overflow their paragraph/list item since inline code had no
  wrap behavior; added overflow-wrap: break-word.
- The header's "Run with Docker" button wrapped to two lines below
  ~370px viewport width; now hidden under 680px alongside the rest of
  nav-cta, matching nav-links (Quickstart in the mobile menu covers
  the same destination).

Verified with Playwright at 320/375px across all pages: no page
overflows the viewport anymore.
---
 assets/css/content.css |  1 +
 assets/css/style.css   | 32 +++++++++++++++++++-------------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/assets/css/content.css b/assets/css/content.css
index 26d503a..1831b05 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -119,6 +119,7 @@
   font-family: var(--mono);
   font-size: 0.9em;
   color: #ffd7c9;
+  overflow-wrap: break-word;
 }
 
 .prose pre {
diff --git a/assets/css/style.css b/assets/css/style.css
index d0781cf..de4bae4 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -275,13 +275,13 @@ section { padding: 80px 0; }
 /* ---------- Feature grid ---------- */
 .grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
 }
 
 .grid-2 {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 20px;
 }
 
@@ -381,7 +381,7 @@ section { padding: 80px 0; }
 
 .footer-grid {
   display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
   gap: 32px;
   margin-bottom: 32px;
 }
@@ -452,7 +452,7 @@ section { padding: 80px 0; }
 
 .docs-layout {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 220px minmax(0, 1fr);
   gap: 48px;
   align-items: start;
 }
@@ -479,6 +479,10 @@ section { padding: 80px 0; }
 .docs-nav a { color: var(--text-dim); }
 .docs-nav a:hover, .docs-nav a.active { color: var(--accent); }
 
+.docs-content {
+  min-width: 0;
+}
+
 .docs-content h2 {
   font-size: 1.5rem;
   margin: 48px 0 16px;
@@ -509,6 +513,7 @@ section { padding: 80px 0; }
   padding: 2px 6px;
   font-family: var(--mono);
   font-size: 0.85em;
+  overflow-wrap: break-word;
 }
 
 .copy-btn {
@@ -547,7 +552,7 @@ td { color: var(--text-dim); }
 /* ---------- Download page ---------- */
 .download-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
 }
 
@@ -556,6 +561,7 @@ td { color: var(--text-dim); }
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 28px;
+  min-width: 0;
 }
 
 .download-card h3 {
@@ -643,19 +649,19 @@ td { color: var(--text-dim); }
 
 /* ---------- Responsive ---------- */
 @media (max-width: 900px) {
-  .grid { grid-template-columns: repeat(2, 1fr); }
-  .grid-2 { grid-template-columns: 1fr; }
-  .footer-grid { grid-template-columns: 1fr 1fr; }
-  .docs-layout { grid-template-columns: 1fr; }
+  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .grid-2 { grid-template-columns: minmax(0, 1fr); }
+  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .docs-layout { grid-template-columns: minmax(0, 1fr); }
   .docs-nav { position: static; }
-  .download-grid { grid-template-columns: 1fr; }
+  .download-grid { grid-template-columns: minmax(0, 1fr); }
 }
 
 @media (max-width: 680px) {
-  .nav-links, .nav-cta .btn-ghost { display: none; }
+  .nav-links, .nav-cta { display: none; }
   .nav-toggle { display: block; }
-  .grid { grid-template-columns: 1fr; }
-  .footer-grid { grid-template-columns: 1fr; }
+  .grid { grid-template-columns: minmax(0, 1fr); }
+  .footer-grid { grid-template-columns: minmax(0, 1fr); }
   .hero-stats { gap: 28px; }
 
   .nav.open .nav-links {