From d54eecaeaf8ec3404322d5f5bebf319db849bf49 Mon Sep 17 00:00:00 2001
From: Dreamodus <info@dreamodus.software>
Date: Sun, 12 Jul 2026 20:03:42 -0700
Subject: [PATCH] Mobile: fix nav and API-table page overflow, stacked
 playground polish

- Nav links scroll horizontally inside the bar on narrow screens
  (hidden scrollbar) instead of forcing page-level horizontal scroll;
  compact logo/link sizing under 760px
- API prop tables scroll inside their own box (display block +
  overflow-x auto) - the last source of horizontal page overflow
- Playground: sticky controls become static in the stacked mobile
  layout; grid columns use minmax(0, 1fr) so code blocks cannot blow
  out the column; smaller code font on phones

Verified at 390x844 with touch emulation: zero horizontal overflow,
rotary knob touch-drag without page scroll, fader tap-to-jump, XY pad
touch drag, and the full synth flow (power, HOLD, latch/unlatch pads)
all working via touch.
---
 apps/docs/src/styles.css | 51 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/styles.css b/apps/docs/src/styles.css
index 4c0839d..58430c1 100644
--- a/apps/docs/src/styles.css
+++ b/apps/docs/src/styles.css
@@ -92,6 +92,45 @@ body {
   background: rgba(255, 255, 255, 0.06);
 }
 
+@media (max-width: 760px) {
+  .nav-inner {
+    gap: 10px;
+    height: 54px;
+  }
+  .nav-logo {
+    font-size: 15px;
+    flex: none;
+  }
+  .nav-logo svg {
+    width: 18px;
+    height: 18px;
+  }
+  /* Links scroll sideways inside the bar instead of overflowing the page. */
+  .nav-links {
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    justify-content: flex-start;
+  }
+  .nav-links::-webkit-scrollbar {
+    display: none;
+  }
+  .nav-links a {
+    flex: none;
+    padding: 6px 9px;
+    font-size: 12.5px;
+  }
+  .codeblock pre {
+    font-size: 12px;
+    padding: 14px;
+  }
+  .hero {
+    padding-top: 56px;
+  }
+}
+
 /* ---- hero ---- */
 .hero {
   padding: 84px 0 40px;
@@ -369,8 +408,14 @@ h2.section-title {
 }
 @media (max-width: 860px) {
   .playground {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
   }
+  .controls {
+    position: static;
+  }
+}
+.playground > * {
+  min-width: 0;
 }
 .controls {
   background: var(--panel);
@@ -512,6 +557,10 @@ h2.section-title {
   border-collapse: collapse;
   font-size: 13.5px;
   margin: 14px 0 30px;
+  /* Wide prop tables scroll inside their own box instead of the page. */
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .api-table th {
   text-align: left;