zuevav/VH_posting_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove stale 5-button grid nav rules that broke the 6-tab horizontal layout

Browse Source 
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>
This commit is contained in:
zuevav
2026-05-14 23:57:44 +03:00
parent 3e1cc94258
commit d776870d35
1 changed files with 15 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+15 -51
View File
@@ -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;