From ab4955f8fc48cc06396d650dae47f0595350287a Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Tue, 3 Feb 2026 13:51:10 +0300
Subject: [PATCH] webui: fix header on mobiles

---
 www/index.html | 39 ++++++++++++++++++++++++++++++++++++---
 www/main.js    | 39 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/www/index.html b/www/index.html
index de46ebdb..06ecfec7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -511,13 +511,46 @@
         /* Responsive */
         @media (max-width: 768px) {
             nav {
-                flex-direction: column;
                 gap: 16px;
+                padding: 12px 0;
+                flex-wrap: wrap;
+            }
+
+            .logo {
+                font-size: 20px;
+                flex-shrink: 0;
             }
 
             .nav-links {
-                flex-direction: column;
-                width: 100%;
+                order: 3;
+                flex: 1 1 100%;
+                gap: 8px;
+                overflow-x: auto;
+                overflow-y: hidden;
+                -webkit-overflow-scrolling: touch;
+                scrollbar-width: none;
+                padding-bottom: 4px;
+            }
+
+            .nav-links::-webkit-scrollbar {
+                display: none;
+            }
+
+            .nav-link {
+                flex-shrink: 0;
+                font-size: 11px;
+                padding: 6px 12px;
+            }
+
+            .docs-link {
+                order: 2;
+                margin-left: auto;
+                flex-shrink: 0;
+            }
+
+            .theme-toggle {
+                order: 1;
+                flex-shrink: 0;
             }
 
             .controls {
diff --git a/www/main.js b/www/main.js
index b67aba2f..633de9ea 100644
--- a/www/main.js
+++ b/www/main.js
@@ -358,13 +358,46 @@ if (!document.querySelector('.logo')) {
     /* Responsive */
     @media (max-width: 768px) {
         nav {
-            flex-direction: column;
             gap: 16px;
+            padding: 12px 0;
+            flex-wrap: wrap;
+        }
+
+        .logo {
+            font-size: 20px;
+            flex-shrink: 0;
         }
 
         .nav-links {
-            flex-direction: column;
-            width: 100%;
+            order: 3;
+            flex: 1 1 100%;
+            gap: 8px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+            padding-bottom: 4px;
+        }
+
+        .nav-links::-webkit-scrollbar {
+            display: none;
+        }
+
+        .nav-link {
+            flex-shrink: 0;
+            font-size: 11px;
+            padding: 6px 12px;
+        }
+
+        .docs-link {
+            order: 2;
+            margin-left: auto;
+            flex-shrink: 0;
+        }
+
+        .theme-toggle {
+            order: 1;
+            flex-shrink: 0;
         }
 
         table, thead, tbody, th, td, tr {