From a21eee7ea571d699c2066afee6582796d696339d Mon Sep 17 00:00:00 2001 From: polybjorn Date: Fri, 1 May 2026 08:55:27 +0000 Subject: [PATCH] fix(themes): apply nav button spacing at all viewport widths (#8743) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Four themes (Alternative-Dark, Origine, Flat, Pafat) define `.nav_menu .btn`, `.nav_menu .stick`, and `.nav_menu .group` margin rules only inside `@media (max-width: 840px)`. At wider viewports the spacing falls back to incidental inline-block whitespace, so narrow view has ~20px between nav-button groups while wide view has ~5px. This PR lifts those margin rules to base scope so both widths match. Narrow-only tweaks (`padding`, `min-height`, Pafat's `min-width`) stay inside @media. Nord is left untouched; it already handles wide-view spacing with its own rem-based values. **Worth keeping?** I can't speak to whether the asymmetry was intentional. If maintainers prefer the tighter desktop density (closer to Nord's `.125rem`), happy to close or rework with smaller wide-view values. Follow-up to #8738, which added the narrow-view rules for Pafat. Wide view, before: wide viewport before Wide view, after: wide viewport after Narrow view (unchanged): narrow viewport Lift .nav_menu .btn, .stick, and .group margin rules out of @media (max-width: 840px) to base scope in Alternative-Dark, Origine, Flat, and Pafat. Narrow-only padding and min-height tweaks stay inside @media. Nord unchanged. Co-authored-by: Bjørn A. Andersen --- p/themes/Alternative-Dark/adark.css | 25 ++++++++++++++----------- p/themes/Alternative-Dark/adark.rtl.css | 25 ++++++++++++++----------- p/themes/Flat/flat.css | 25 ++++++++++++++----------- p/themes/Flat/flat.rtl.css | 25 ++++++++++++++----------- p/themes/Origine/origine.css | 25 ++++++++++++++----------- p/themes/Origine/origine.rtl.css | 25 ++++++++++++++----------- p/themes/Pafat/pafat.css | 24 ++++++++++++++---------- p/themes/Pafat/pafat.rtl.css | 24 ++++++++++++++---------- 8 files changed, 112 insertions(+), 86 deletions(-) diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 3bc14afd9..033999cc9 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -752,6 +752,20 @@ kbd { position: static; } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + /*=== Feed articles */ .flux { background: var(--background-color-dark); @@ -1140,21 +1154,10 @@ kbd { } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .nav_menu .stick #mark-read-menu .dropdown-toggle.btn { border-left: 1px solid var(--border-color-middle); border-top-left-radius: 3px; diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index aecb12f7b..d48fc33be 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -752,6 +752,20 @@ kbd { position: static; } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + /*=== Feed articles */ .flux { background: var(--background-color-dark); @@ -1140,21 +1154,10 @@ kbd { } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .nav_menu .stick #mark-read-menu .dropdown-toggle.btn { border-right: 1px solid var(--border-color-middle); border-top-right-radius: 3px; diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index 7cdff982b..ca23a460e 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -687,6 +687,20 @@ th { position: static; } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + .dropdown-menu .dropdown-header .icon { filter: invert(0.6); } @@ -973,21 +987,10 @@ th { } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .nav_menu .stick #mark-read-menu .dropdown-toggle.btn { border-left-width: 0; border-top-left-radius: 5px; diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css index 4c2cfeeb0..66e00ae8a 100644 --- a/p/themes/Flat/flat.rtl.css +++ b/p/themes/Flat/flat.rtl.css @@ -687,6 +687,20 @@ th { position: static; } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + .dropdown-menu .dropdown-header .icon { filter: invert(0.6); } @@ -973,21 +987,10 @@ th { } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .nav_menu .stick #mark-read-menu .dropdown-toggle.btn { border-right-width: 0; border-top-right-radius: 5px; diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 1f629ad71..d0dd96429 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -846,6 +846,20 @@ button:hover .icon, border-bottom: 1px solid var(--border-color); } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + /*=== Feed articles */ .flux { background-color: var(--background-color-light); @@ -1175,21 +1189,10 @@ button:hover .icon, } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .dropdown-target:target ~ .dropdown-toggle::after { background-color: var(--background-color-light); border-top: 1px solid var(--border-color); diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index a9408bc38..028d96140 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -846,6 +846,20 @@ button:hover .icon, border-bottom: 1px solid var(--border-color); } +.nav_menu .btn { + margin: 5px 10px; +} + +.nav_menu .stick, +.nav_menu .group { + margin: 0 10px; +} + +.nav_menu .stick .btn, +.nav_menu .group .btn { + margin: 5px 0; +} + /*=== Feed articles */ .flux { background-color: var(--background-color-light); @@ -1175,21 +1189,10 @@ button:hover .icon, } .nav_menu .btn { - margin: 5px 10px; padding: 3px 5px; min-height: 0; } - .nav_menu .stick, - .nav_menu .group { - margin: 0 10px; - } - - .nav_menu .stick .btn, - .nav_menu .group .btn { - margin: 5px 0; - } - .dropdown-target:target ~ .dropdown-toggle::after { background-color: var(--background-color-light); border-top: 1px solid var(--border-color); diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index 1e0ac7db5..11a246e7c 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -793,6 +793,20 @@ a.signin { background-color: var(--background-color-grey-light); border-bottom: 1px solid var(--border-color-grey-dark); text-align: center; + + .btn { + margin: 5px 10px; + } + + .stick, + .group { + margin: 0 10px; + } + + .stick .btn, + .group .btn { + margin: 5px 0; + } } /*=== Feed articles */ @@ -1095,20 +1109,10 @@ a.signin { padding-left: 0; padding-bottom: 5px; - .btn { - margin: 5px 10px; - } - .stick, .group { - margin: 0 10px; min-width: 0; } - - .stick .btn, - .group .btn { - margin: 5px 0; - } } .dropdown-target:target ~ .dropdown-toggle::after { diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css index 0e821e0e4..6400894be 100644 --- a/p/themes/Pafat/pafat.rtl.css +++ b/p/themes/Pafat/pafat.rtl.css @@ -793,6 +793,20 @@ a.signin { background-color: var(--background-color-grey-light); border-bottom: 1px solid var(--border-color-grey-dark); text-align: center; + + .btn { + margin: 5px 10px; + } + + .stick, + .group { + margin: 0 10px; + } + + .stick .btn, + .group .btn { + margin: 5px 0; + } } /*=== Feed articles */ @@ -1095,20 +1109,10 @@ a.signin { padding-right: 0; padding-bottom: 5px; - .btn { - margin: 5px 10px; - } - .stick, .group { - margin: 0 10px; min-width: 0; } - - .stick .btn, - .group .btn { - margin: 5px 0; - } } .dropdown-target:target ~ .dropdown-toggle::after {