From 9b1b1bbdba964216e80fa3f517910c230c2efdd1 Mon Sep 17 00:00:00 2001
From: Federico Jaramillo Martinez <federico@klingit.com>
Date: Sat, 16 May 2026 01:11:01 +0200
Subject: [PATCH] fix: repair docs mobile navigation

---
 .changeset/fair-frogs-navigate.md |  5 +++++
 docs/styles.css                   | 35 ++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fair-frogs-navigate.md

diff --git a/.changeset/fair-frogs-navigate.md b/.changeset/fair-frogs-navigate.md
new file mode 100644
index 0000000..9effee2
--- /dev/null
+++ b/.changeset/fair-frogs-navigate.md
@@ -0,0 +1,5 @@
+---
+"@jmfederico/pi-web": patch
+---
+
+Fix the docs mobile navigation so FAQ pages no longer overflow and compact the GitHub/theme controls on small screens.
diff --git a/docs/styles.css b/docs/styles.css
index 4163001..57b500c 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -746,6 +746,12 @@ code .comment,
 .faq-list {
   display: grid;
   gap: 18px;
+  min-width: 0;
+}
+
+.faq-item {
+  min-width: 0;
+  scroll-margin-top: 112px;
 }
 
 .faq-item ul,
@@ -987,11 +993,38 @@ html[data-theme="light"] .comment {
   .nav {
     align-items: flex-start;
     flex-direction: column;
+    gap: 12px;
     padding: 14px 0;
   }
 
   .nav-links {
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    width: 100%;
+    scrollbar-width: none;
+  }
+
+  .nav-links::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nav-links a,
+  .theme-toggle {
+    min-height: 38px;
+    padding: 0 10px;
+  }
+
+  .nav-links .github-link,
+  .theme-toggle {
+    justify-content: center;
+    width: 38px;
+    min-width: 38px;
+    padding: 0;
+  }
+
+  .nav-links .github-link span,
+  .theme-toggle [data-theme-label] {
+    display: none;
   }
 
   .hero {