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;