fix(docs): keep mobile header controls visible

.changeset/mobile-docs-header-controls.md

@@ -0,0 +1,5 @@
+---
+"@jmfederico/pi-web": patch
+---
+
+Keep the documentation site's GitHub and theme controls visible in mobile portrait layouts.

docs/404.html

@@ -28,11 +28,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="/" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="/remote-first.html">Remote-first</a>
             <a href="/machines.html">Fleet</a>
             <a href="/install.html">Install</a>
             <a href="/plugins.html">Plugins</a>
             <a href="/faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -47,6 +50,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/faq.html

@@ -27,11 +27,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html">Remote-first</a>
             <a href="machines.html">Fleet</a>
             <a href="install.html">Install</a>
             <a href="plugins.html">Plugins</a>
             <a href="faq.html" aria-current="page">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -46,6 +49,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/index.html

@@ -34,11 +34,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html">Remote-first</a>
             <a href="machines.html">Fleet</a>
             <a href="install.html">Install</a>
             <a href="plugins.html">Plugins</a>
             <a href="faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -53,6 +56,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/install.html

@@ -27,11 +27,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html">Remote-first</a>
             <a href="machines.html">Fleet</a>
             <a href="install.html" aria-current="page">Install</a>
             <a href="plugins.html">Plugins</a>
             <a href="faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -46,6 +49,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/machines.html

@@ -30,11 +30,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html">Remote-first</a>
             <a href="machines.html" aria-current="page">Fleet</a>
             <a href="install.html">Install</a>
             <a href="plugins.html">Plugins</a>
             <a href="faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -49,6 +52,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/plugins.html

@@ -27,11 +27,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html">Remote-first</a>
             <a href="machines.html">Fleet</a>
             <a href="install.html">Install</a>
             <a href="plugins.html" aria-current="page">Plugins</a>
             <a href="faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -46,6 +49,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/remote-first.html

@@ -30,11 +30,14 @@
       <nav class="container nav" aria-label="Main navigation">
         <a class="brand" href="./" aria-label="PI WEB home">PI WEB</a>
         <div class="nav-links">
+          <div class="nav-pages">
             <a href="remote-first.html" aria-current="page">Remote-first</a>
             <a href="machines.html">Fleet</a>
             <a href="install.html">Install</a>
             <a href="plugins.html">Plugins</a>
             <a href="faq.html">FAQ</a>
+          </div>
+          <div class="nav-actions">
             <a class="github-link" href="https://github.com/jmfederico/pi-web" aria-label="PI WEB on GitHub">
               <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
                 <path
@@ -49,6 +52,7 @@
               <span data-theme-label>Theme</span>
             </button>
           </div>
+        </div>
       </nav>
     </header>
 

docs/styles.css

@@ -197,16 +197,29 @@ video {
   background: var(--brand-2);
 }
 
-.nav-links {
+.nav-links,
+.nav-pages,
+.nav-actions {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
+}
+
+.nav-links {
   color: var(--muted);
   font-size: 0.95rem;
   white-space: nowrap;
 }
 
+.nav-pages {
+  flex: 0 1 auto;
+}
+
+.nav-actions {
+  flex: 0 0 auto;
+}
+
 .nav-links a,
 .theme-toggle {
   display: inline-flex;
@@ -1081,19 +1094,23 @@ html[data-theme="light"] .comment {
   }
 
   .nav-links {
-    flex-wrap: nowrap;
+    overflow: visible;
-    overflow-x: auto;
     width: 100%;
+  }
+
+  .nav-pages {
+    flex: 1 1 auto;
+    overflow-x: auto;
     padding-bottom: 2px;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
   }
 
-  .nav-links a:not(.github-link) {
+  .nav-pages a {
     flex: 0 0 auto;
   }
 
-  .nav-links::-webkit-scrollbar {
+  .nav-pages::-webkit-scrollbar {
     display: none;
   }
 
@@ -1103,26 +1120,22 @@ html[data-theme="light"] .comment {
     padding: 0 10px;
   }
 
-  .nav-links .github-link,
+  .nav-actions {
-  .nav-links .theme-toggle {
     position: absolute;
     top: 14px;
+    right: 0;
+  }
+
+  .nav-actions .github-link,
+  .nav-actions .theme-toggle {
     justify-content: center;
     width: 38px;
     min-width: 38px;
     padding: 0;
   }
 
-  .nav-links .github-link {
+  .nav-actions .github-link span,
-    right: 44px;
+  .nav-actions .theme-toggle [data-theme-label] {
-  }
-
-  .nav-links .theme-toggle {
-    right: 0;
-  }
-
-  .nav-links .github-link span,
-  .nav-links .theme-toggle [data-theme-label] {
     display: none;
   }
 }