mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-05-14 18:23:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(themes): apply nav button spacing at all viewport widths (#8743)

Browse Source 
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:
<img width="530" height="39" alt="wide viewport before" src="https://github.com/user-attachments/assets/a25310bd-1b6d-4966-ae4e-7812d73b45f9" />

Wide view, after:
<img width="632" height="40" alt="wide viewport after" src="https://github.com/user-attachments/assets/3c2db89c-0280-4baa-97aa-5ea83211771e" />

Narrow view (unchanged):
<img width="482" height="39" alt="narrow viewport" src="https://github.com/user-attachments/assets/97fc6b7f-9c17-4116-a64f-09255b9cc808" />

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 <polybjorn@users.noreply.github.com>
This commit is contained in:
polybjorn
2026-05-01 08:55:27 +00:00
committed by GitHub
parent 268d49e373
commit a21eee7ea5
8 changed files with 112 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
p/themes/Alternative-Dark/adark.css
View File

@@ -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;

25
p/themes/Alternative-Dark/adark.rtl.css
View File

@@ -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;

25
p/themes/Flat/flat.css
View File

@@ -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;

25
p/themes/Flat/flat.rtl.css
View File

@@ -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;

25
p/themes/Origine/origine.css
View File

@@ -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);

25
p/themes/Origine/origine.rtl.css
View File

@@ -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);

24
p/themes/Pafat/pafat.css
View File

@@ -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 {

24
p/themes/Pafat/pafat.rtl.css
View File

@@ -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 {