From d776870d35bc5838f02a9cd22b22d6fd1d792da5 Mon Sep 17 00:00:00 2001
From: zuevav <34027267+zuevav@users.noreply.github.com>
Date: Thu, 14 May 2026 23:57:44 +0300
Subject: [PATCH] Remove stale 5-button grid nav rules that broke the 6-tab
 horizontal layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The real reason the mobile nav still wrapped into a tall stack: deeper
in style.css (lines ~3260, ~3876, ~3950, ~3978) the original mobile
design used `display: grid` with explicit grid-column overrides for the
4th/5th nav buttons. Those rules sit AFTER the @media block I added at
line 244, so same-specificity source-order made them win — flipping
the nav back from flex to a 3-column grid that no longer fits 6 items.

Removed/neutered those legacy grid rules (designed for the old 5-tab
nav) and added `display: flex !important` plus `grid-template-columns:
none !important` to the new @media block so any future grid rule can't
sneak back in. Result: on screens ≤720px the nav is a single flex row
with horizontal scroll, no matter the source order.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 css/style.css | 66 ++++++++++++---------------------------------------
 1 file changed, 15 insertions(+), 51 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1a3048d..20f2fec 100644
--- a/css/style.css
+++ b/css/style.css
@@ -238,17 +238,17 @@ body {
 }
 
 /* On narrow screens, switch to horizontal scrolling so all 6 tabs stay
-   on a single row instead of breaking into a tall stack. !important is
-   used defensively here — any cached older CSS or future style overrides
-   shouldn't be able to bring back the wrapped layout on phones. */
+   on a single row instead of breaking into a tall stack. */
 @media (max-width: 720px) {
     .main-nav {
+        display: flex !important;
         flex-wrap: nowrap !important;
         overflow-x: auto !important;
         overflow-y: hidden !important;
         scroll-snap-type: x proximity;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
+        grid-template-columns: none !important;
         gap: 4px !important;
         padding: 6px !important;
     }
@@ -263,6 +263,7 @@ body {
         scroll-snap-align: start;
         padding: 10px 14px !important;
         font-size: 0.88rem !important;
+        grid-column: auto !important;
     }
 }
 
@@ -3257,34 +3258,13 @@ select {
         transform: translateX(16px);
     }
 
-    /* Navigation - grid layout for mobile */
+    /* Mobile navigation tweaks — horizontal-scroll layout is defined at the
+       top of this file (@media max-width: 720px). Here we only adjust the
+       outer margin for the smaller breakpoint. */
     .main-nav {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 4px;
-        padding: 6px;
         margin-bottom: 12px;
     }
 
-    .nav-btn {
-        padding: 10px 6px;
-        font-size: 0.75rem;
-        text-align: center;
-        min-width: 0;
-        flex: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* Make settings button span 2 columns for 5 items grid */
-    .nav-btn:nth-child(4) {
-        grid-column: 1 / 2;
-    }
-    .nav-btn:nth-child(5) {
-        grid-column: 2 / 4;
-    }
-
     .panel {
         padding: 12px;
         border-radius: var(--radius-md);
@@ -3873,20 +3853,9 @@ select {
         font-size: 1rem;
     }
 
-    .main-nav {
-        grid-template-columns: repeat(2, 1fr);
-        gap: 4px;
-    }
-
-    /* Adjust nav buttons for 2-column grid */
-    .nav-btn:nth-child(5) {
-        grid-column: 1 / 3;
-    }
-
-    .nav-btn {
-        padding: 10px 4px;
-        font-size: 0.7rem;
-    }
+    /* Mobile nav layout is defined in the top-level @media (max-width: 720px)
+       — horizontal scroll with nowrap. We don't need to redefine it for
+       480px; everything inherits. */
 
     .panel {
         padding: 10px;
@@ -3947,9 +3916,11 @@ select {
         font-size: 0.9rem;
     }
 
+    /* Keep nav button text readable even on tiny phones, but smaller than
+       720px breakpoint. */
     .nav-btn {
-        font-size: 0.65rem;
-        padding: 8px 2px;
+        font-size: 0.78rem !important;
+        padding: 9px 11px !important;
     }
 
     .panel {
@@ -4005,14 +3976,7 @@ select {
 
 /* Landscape phones */
 @media (max-width: 768px) and (orientation: landscape) {
-    .main-nav {
-        grid-template-columns: repeat(5, 1fr);
-    }
-
-    .nav-btn:nth-child(4),
-    .nav-btn:nth-child(5) {
-        grid-column: auto;
-    }
+    /* Navigation uses the horizontal-scroll layout from the 720px block. */
 
     .floating-action-bar {
         bottom: 6px;