Browsers don't inherit font-family on button, input, select, textarea by
default, so the rule on html, body in frss.css didn't reach the "Mark as
read" button or the search input. Add an inherit rule so all themes
extending base-theme pick up their configured font.
Reported and tested by @JerryCrazy.
FixesFreshRSS/FreshRSS#8803
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
#button-update-loading and the generic .loading class (used by
#first_load) painted loader.gif as a background. Both now use the
#load_more.loading::after border-rotation spinner from #8804. The
unused #slider-content .loader rule is also removed. Drops the
--frss-loading-image variable, all twelve loader.gif files, and
references in the theme contribution docs.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Replace four :has(~.date) selectors with a has-date modifier class
on .flux_header, mirroring the existing has-thumbnail and has-summary
classes. The condition (whether the date is rendered) is known
server-side and can be exposed on the parent <ul> directly. Same
elements matched in modern browsers. The rules now also apply in
browsers without :has() support, fixing the date column overlapping
the title in SeaMonkey (#6776).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The :has(input[type="checkbox"]) check is redundant. Every <label>
inside .dropdown-menu .item already has a checkbox child (constructed
in main.js), so the selector matches the same set as :not(.noHover)
alone. Removing it makes the rule work in browsers without :has()
support (#6776).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
#8801 dropped the unconditional 40px cap on .item.website at narrow widths so users with topline_website set to name/full would actually see the feed name on mobile. With the default 'full' mode, the column then inherited the 200px wide-width default, squashing the article title (#8814).
Re-introduce a cap for the name-bearing modes: max-width 30vw with width auto, so the favicon and name shrink to fit the viewport without overrunning the title cell.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* fix(themes): replace #load_more loading-state GIF with a CSS spinner
In its `.loading` state, the "Load more" button kept its `.btn` frame and the spinner inside was hard to see or invisible across themes. Replaces the GIF with a base-theme CSS spinner inheriting `currentColor`, drops the button frame, respects `prefers-reduced-motion`, and renders crisply at any DPI. Per-theme `#load_more.loading` overrides in Nord, Flat, Mapco, Ansum and Swage become redundant and are removed; a now-redundant `font-size: 0` rule in `base.css` is also dropped.
* fix(themes): use border-rotation spinner for older-browser compat
Replaces conic-gradient + mask + aspect-ratio (Firefox 83+, Safari 15.4+) with border + rotate, supported in Gecko since Firefox 16 (2012) and Blink/WebKit since 2015. Visual difference: a ring with a rotating gap instead of a tapered arc. currentColor inheritance and prefers-reduced-motion handling are preserved.
* fix(themes): regenerate RTL spinner stylesheet
rtlcss flips border-right-color to border-left-color for RTL; the manual port of the spinner block missed it. Regenerated via npm run rtlcss.
Reworked the spinner with border + rotate instead of conic-gradient + mask + aspect-ratio.
<img width="35" height="36" alt="Screenshot 2026-05-11 at 11 05 43" src="https://github.com/user-attachments/assets/e065efc9-9d6c-4369-8390-f0e89db81952" />
Oldest browser versions still supported: Firefox 16 (2012), SeaMonkey 2.13 (2012), Chrome 43 (2015), Safari 9 (2015), Edge 12 (2015). Below those, `@keyframes` and `animation` would need `-webkit-` fallbacks.
Verified now working in SeaMonkey 2.53.23. Couldn't test feed clicks or page reload there because login itself hits a separate cookie issue.
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The multiline class on the title <a> existed only so the parent <li>
could detect it via :has(.multiline). The condition (thumbnail or
summary enabled) is already exposed on the parent <ul> by the
has-thumbnail and has-summary classes, so keying the rule on those
directly removes the indirection. Same elements matched in modern
browsers. The rule now also applies where :has() isn't supported,
relevant to #6776.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Rename the Nord theme display name from "Nord theme" to "Nord". The upstream Nord palette project at https://www.nordtheme.com refers to itself consistently as "Nord" throughout its branding; the "theme" suffix is redundant. The rename also matches the other entries in the theme picker (Ansum, Dark, Mapco, Pafat, Swage), which all use a single short name.
The theme directory, file paths, and CSS class names are unchanged. Only the user-facing display name in the theme picker (and the corresponding rows in the user docs) is affected.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Two narrow @media rules in base-theme/frss.css predate the configurable topline_website modes from #4969 and force icon-only behavior regardless of the user's Website setting; #8631 partially papered over this for grid-layout entries. Drop the unconditional span-hide and its grid-layout exception, and scope the 40px width cap to .websiteicon (with a comment explaining why it stays at narrow).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
When topline_website is "icon", the <li> renders class="item website
icon". Bare .icon rules in Nord and Dark apply a filter that cascades
onto the favicon <img> inside, so article-list favicons render tinted
in icon-only mode. No theme CSS targets the unprefixed value; layout
modes are driven from the parent <ul> (.websiteicon, .websitename).
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The internal search was shown in the UI as the user search.
This was due to the lazy nature of the Generator. Improve the try/catch behaviour at the same time.
How to test:
* Make a user query with a search parameter
* Share the user query as HTML
* Observe the search field (should be empty with this PR, while it contained the internal search before)
We were not vulnerable to it, but here is an additional layer of security against search ingestions, in particular in public user queries, where someone could try to ingest a search like `) OR (interesting`
* Extension to JSON imports: interpret
"origin": {
"category": "..."
},
as category for FreshRSS. When importing a new feed configure the feed
into this category. Creates missiong categories on the fly.
* Fix syntax
* fix(import): tighten JSON category import follow-ups
- Use strict comparison `!== false` after `addCategory()` so a (theoretical)
zero return from auto-increment is not silently treated as failure
(matches review feedback on #5638).
- Modernise property declaration to typed property syntax, matching the
surrounding `$entryDAO`/`$feedDAO` style.
- Pass `$username` to `createCategoryDao()` in `importFile()` so CLI
imports for a non-current user create categories on the right account,
matching the adjacent entry/feed DAO instantiations.
- Trim the requested category name and skip if it is empty after trim,
so a whitespace-only `"category"` value falls back to the default
category instead of creating a junk row with an empty name. Also
normalises trailing/leading whitespace so `" Tech News "` reuses an
existing `"Tech News"` category.
* Update app/Controllers/importExportController.php
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
---------
Co-authored-by: Robert Dahlem <robert.dahlem@gmx.net>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Alt-Dark, Dark, Origine, and Pafat use `border-bottom: 1px solid` on
`.header > .item`, making their wide-view header 57px tall (56px
content + 1px border). Other shipped themes have no such border and
render at 56px.
Replace `border-bottom` with `box-shadow: inset 0 -1px 0`. Visually
identical (same colour, same position at the bottom of each header
cell), but the shadow doesn't add to the box height. Wide-view
header outerHeight becomes 56px across themes, which lets the
shared `--height-header: 56px` token introduced in #8783 produce
pixel-perfect alignment between the wide header and the narrow
drawer X button. Without this PR, those four themes carry a 1px
residual offset under #8783's alignment fix.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Mapco and Ansum apply `transition: all 0.2s ease-in-out` to `.aside`
in their narrow `@media`. When the viewport crosses 840px with the
sidebar open, the resulting `.aside` position change (`static` to
`fixed`) gets animated alongside width, producing a visible artefact
where the X button slides down then scrolls back up before settling.
Limit the transition to the property that should actually animate
(`width`), matching base-theme's existing
`transition: width 200ms linear`.
The artefact only manifests when the drawer stays open across the
840px boundary, which is the behaviour introduced by #8775. On current
edge, `init_nav_menu`'s `media.onchange` toggles the aside off when
crossing the breakpoint, hiding the bug.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Nord was the only shipped theme applying a backdrop-filter to
.dropdown-close outside the narrow-viewport @media block, dimming the
page behind any open dropdown (Settings, mark-read menu, etc.) in wide
view.
Other themes leave the click-catcher transparent in wide view and only
apply a scrim in narrow view, where it doubles as the visual backdrop
for the slide-out aside. The wide-view darken in Nord read as
inconsistent against its own narrow-view treatment (grayscale + blur)
and against every other theme.
Click-outside-to-close still works; only the visual backdrop is removed.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* fix(layout): reserve logo image box via intrinsic dimensions
Add the SVG's intrinsic 1280x256 dimensions to the default
<img class="logo"> in header.phtml and simple.phtml. The
browser uses these to allocate a correctly-proportioned box
from HTML parse time, before CSS is applied; without them, a
cached image can render at native size for a frame on fast
back-to-back navigation. CSS still controls the rendered
height (2rem wide, 24px narrow); width auto-derives from the
intrinsic ratio.
* fix(layout): use rendered logo size for img dimensions
1280 × 256 (the SVG's intrinsic size) replicates the unstyled-frame
flash this PR aims to prevent. 160 × 32 has the same 5:1 ratio and
matches the CSS-rendered size, so the reserved box is correct both
before and after CSS applies.
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Closes#8765
Changes proposed in this pull request:
- Add disabled-user CSS class to user rows in the management table when the account is disabled
- Add .disabled-user { opacity: 0.5; } style to base theme to visually dim disabled accounts
- Add entry to CREDITS.md
How to test the feature manually:
1. Go to Administration → User Management
2. Have at least one disabled user account in the list
3. Verify that disabled user rows appear dimmed (50% opacity) compared to active users, without any change in functionality
Jekyll 3 is unmaintained and its safe_yaml dependency breaks on
Ruby 3.4+ where base64 left the default stdlib. The docs workflow
already runs `bundle exec jekyll build` directly, so GitHub Pages'
Jekyll 3 lock does not apply here.
Changes:
* Pin `jekyll ~> 4.3`. Replace `jekyll-commonmark-ghpages` (pinned
to Jekyll 3) with upstream `jekyll-commonmark`. Drop unused
`jekyll-paginate`. Add `gem 'base64'` so the lockfile stays valid
on Ruby 3.4+ where it became a bundled gem.
* Move CommonMark options into `_config.yml` to match what the
`-ghpages` variant enabled by default: SMART, FOOTNOTES, UNSAFE
(so inline HTML like `<br>` in tables still renders), plus the
strikethrough, autolink, table, and tagfilter extensions. Set
Rouge as the highlighter.
* Strip the leading slash from `defaults.scope.path` (`/en/*` to
`en`). Jekyll 4 requires no leading slash, otherwise `page.lang`
silently fails to propagate and `jekyll-i18n_tags` crashes the
build.
* Pass `generateId=true` to the existing `anchor_headings.html`
include so headings get slugified IDs. The `-ghpages` variant
produced these by default.
* Bump CI Ruby to 3.4.9 and `cache-version` to invalidate the old
Jekyll 3 gem cache on the first run.
Build is about 9x faster (1.0s vs 9.2s). Compared the rendered
output page by page against the Jekyll 3 baseline; remaining
differences are whitespace, footnote class names (no CSS depends
on either set), and one HTML entity (`↩`) becoming the
literal `↩`. Visually and functionally the same.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
After #8747 the sidebar would re-open on its own when navigating
(e.g. clicking the logo) on sessions where sessionStorage said
the sidebar should be closed.
init_nav_menu() ran toggle_aside_click() to honour the stored
state, then gated a follow-up `.visible` re-add on
`getComputedStyle(aside).display !== 'none'`. Before #8747 that
gate worked because the close path set `aside.style.display =
'none'` inline; #8747 replaced that with an `is-hidden` class
applied only at wide viewports, so at narrow viewports the
computed display stays `table-cell` after closing and the gate
wrongly re-adds `.visible`, sliding the drawer open.
Gate on the toggle button's `.active` state instead. It's the
real source of truth for "should the sidebar be open" and is
already used elsewhere in the same function.
Fixes#8771
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Detect when an `app/i18n/<lang>/` directory has no matching `gen.lang.<lang>`
key in the reference language (or vice versa), and refuse to regenerate the
README from that invalid state.
This catches a class of silent corruption where the README translation
table renders literal i18n keys instead of localised language names. The
trigger is most often a case-folded directory on macOS APFS - git tracks
`zh-TW`, the local FS reads back `zh-tw`, the script's `_t('gen.lang.zh-tw')`
lookup misses, and the README ends up with `gen.lang.zh-tw (zh-tw)` instead
of `正體中文 (zh-TW)`. The same check also flags orphan directories (no
display-name key) and orphan keys (no directory).
The new validateLanguageNames() method on I18nData performs a bidirectional
set comparison and returns human-readable issues. cli/check.translation.php
prints them to STDERR and gates --generate-readme on the result, leaving
routine completeness validation behaviour unchanged. Adds four PHPUnit
tests covering: clean state, case mismatch, orphan directory, orphan key.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Apply sentence case to all H1s in docs/en/ and remove redundant "FreshRSS"
from titles where the docs site context already implies it. Align the three
section index titles to "Administrator/Developer/User manual", matching
the existing root H1 "FreshRSS manual (English)".
Add missing H1s to two pages that were silently dropped from the sidebar:
the user FAQ and the Caddy reverse proxy page. The sidebar template uses
page.title (derived from H1 by jekyll-titles-from-headings), so pages
without an H1 had title=nil and were skipped.
Update sidebar parent labels in docs_nav.html and the chapter list in
en/index.md to use the new "* manual" naming. Update link text in section
indexes that referenced the old H1s. Bundle two grammar fixes encountered
along the way: "an User Interface" -> "a user interface", and drop the
awkward "the" in "Configuring the email address validation".
EN only. No filenames, URLs, or anchor targets changed (anchors come from
H2 and below, which are untouched). FR is generated from EN via po4a and
will be regenerated separately.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* docs: mention db-backup.php and simplify git update steps
Two follow-ups from Alkarex's review of #8741.
Backup: add ./cli/db-backup.php to the "What to back up" list as a
database-agnostic alternative to mysqldump/pg_dump. It was already
documented further down the page; the top bullet just didn't point
to it.
Updating: replace the 6-step prose list in "Using git" with a command
block matching the sequence in 07_LinuxUpdate.md. Drop the top-level
"move your backup outside the directory" warning; git reset --hard
doesn't need it, the real hazard is git clean -f -d removing
untracked files, so the warning sits inline on that line. Link to
the Linux page for the sudo and permissions-helper variant.
* docs: restore backup warning, clarify git clean note
Per @Alkarex review on #8763. Reword the inline `git clean` note to
cover untracked files generally (themes, extensions, local edits) since
backups are now called out separately above.
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
## Summary
`--width-aside` already existed in `base-theme/frss.css` but only as a fallback inside the narrow-viewport rule from #8749. Desktop `.aside`, `#nav_entries`, `.reader .aside.visible`, and `.header > .item.title` hardcoded `300px` independently. This PR makes `--width-aside` the canonical token for the navigation drawer / left column width, so theme overrides apply everywhere consistently.
## Changes
`p/themes/base-theme/frss.css`:
- Define `--width-aside: 300px` in `:root`.
- `.aside`, `#nav_entries`, `.reader .aside.visible`, `.header > .item.title`: replace hardcoded `300px` with `var(--width-aside)`.
- Narrow-viewport `.aside.visible`: drop the now-redundant `320px` fallback in `min(...)`.
`p/themes/Swage/swage.css`:
- Remove the now-redundant `width: var(--width-aside)` overrides on `.aside`, `#nav_entries`, and `.header > .item.title` (inherited from base now). Swage's `--width-aside: 231px` declaration stays in place, so `#nav_entries`, the header `.title` block, and the reader-view sidebar now resolve to 231 via the token (previously stuck at 300 from base hardcodes), aligning them with Swage's other column elements.
RTL mirrors regenerated via `npm run rtlcss`.
## Why 300px
300px is the existing FreshRSS desktop sidebar value, so default themes see no visible change. The narrow-viewport cap previously used 320 as a fallback, but on actual phones the `calc(100vw - 56px)` cap dominates, so the change has near-zero practical effect on phone UX. Tablet and narrow-desktop sidebars become slightly narrower, more in line with typical desktop conventions.
## Tested
- Origine, Flat, Swage at desktop widths
- Origine and Swage at narrow viewports: sidebar slide, open, close
- Reader view in Origine and Swage
- Header title block: Swage 231, default themes 300
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The `transition: width 200ms linear` rule on `.aside` in the narrow
`@media` block stopped firing after #8201 added inline `display: none`
toggling. Browsers don't interpolate width when an element flips to or
from `display: none`, so width snaps on open and the close transition
gets cut off before any frame renders.
Replace the inline `display` toggle with an `is-hidden` class, applied
only at wide viewports. At narrow viewports the existing `width: 0;
position: fixed; overflow: hidden` already hides the element, so
`display: none` is redundant there and was the only thing blocking the
transition.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
* fix(themes): tighten narrow-viewport sidebar with Material drawer cap
Cap `.aside.visible` width at `min(var(--width-aside, 320px), calc(100vw - 56px))` instead of 90%. Themes that define `--width-aside` (Swage) keep their existing value; others get a 320px cap with a 56px touch peek of the underlying view.
Also restores aside selectors dropped by recent refactors:
- #8201 renamed `.aside:target` to `.aside.visible` in base-theme; this fix applies the same rename in Swage, Nord, Origine, and Alternative-Dark
- #8200 dropped Swage's narrow-viewport sidebar width override; the new base cap covers that case for Swage and the other themes equally
- Nord's `max-width: 300px` aside override is now redundant with the base cap and is removed
* fix(themes): merge duplicate .aside.visible rule
---------
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Two narrow-viewport rules were duplicated across leaf themes: `.aside { transition: width 200ms linear }` and `.aside.aside_feed { padding: 0 }`. This PR lifts both into the existing `@media (max-width: 840px)` block in `base-theme/frss.css` and removes the duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord. Swage's redundant `transition` line is also dropped (its other `.aside` properties stay).
Verified visually across Alternative-Dark, Ansum, Flat, Mapco, Nord, Origine, and Pafat at narrow and wide viewports. No regressions. Ansum and Mapco keep their own `.aside { transition: all 0.2s ease-in-out }` via source-order. Themes that previously had no explicit `.aside` rule (Dark, Dark-pink, Origine-compact via inheritance) gain identical computed values to their parent themes.
Also adds top-of-file comments to `base-theme/base.css` and `base-theme/frss.css` clarifying that `base.css` is a scaffold loaded only for the unconfigured base-theme fallback, while `frss.css` is the real shared base loaded by every theme via the `_frss.css` prefix in `metadata.json`. Follow-up to #8743, which initially targeted the wrong file before being corrected.
Lift .aside { transition: width 200ms linear } and
.aside.aside_feed { padding: 0 } from leaf themes into the shared
@media (max-width: 840px) block in base-theme/frss.css. Delete the
duplicates from Alternative-Dark, Flat, Origine, Pafat, and Nord.
Drop the redundant transition line from Swage.
Add top-of-file comments to base-theme/base.css and base-theme/frss.css
clarifying that base.css is a scaffold for the base-theme fallback only,
while frss.css is the real shared base loaded by every theme via the
"_frss.css" prefix in metadata.json. Documents the structure that made
#8743 initially target the wrong file.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
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>
The nested rule `.content, .content_thin { ... .content hr { ... } }`
in Ansum/_layout.css and Mapco/_layout.css expands the inner selector
to `.content .content hr` / `.content_thin .content hr`, which never
matches any markup. <hr> separators in article bodies have fallen
back to browser defaults instead of the styled rule (light grey 1px
line with soft shadow). Dating back to the SCSS sources from 2019
and preserved verbatim through the native-CSS conversion in #8241.
Drop the `.content` prefix on the inner selector so the rule applies
as `.content hr, .content_thin hr`.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
The narrow-viewport @media block in Pafat repeats the parent `.nav_menu`
class on its inner selectors (`.nav_menu .btn` etc. inside a `.nav_menu`
nesting block), which native CSS nesting expands to `.nav_menu .nav_menu
.btn` and never matches. Buttons and stick/group wrappers in the top nav
row at <=840px have therefore been falling back to default layout instead
of the intended margins.
Drop the redundant `.nav_menu` prefix on the inner selectors so the rules
apply as intended.
Activating the dormant rules also exposes an asymmetry in the base
`.nav_menu` padding (`5px 0 0 2.5rem`: 5px top, 0 bottom). Combined with
the now-active 5px button margin, buttons sit a few pixels below the
visual centre of the row. Add `padding-bottom: 5px` inside the @media
block to rebalance.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
Fixes a cluster of bugs in the Swage theme. Most are nav-bar related and reproducible in narrow viewports (≤840px); one affects the article list at any viewport.
1. **Horizontal page overflow.** `.nav_menu` had `width: 100%` plus `padding-left: 2rem` with default `box-sizing: content-box`, making it 32px wider than the viewport. The whole page side-scrolled. Fixed with `box-sizing: border-box`.
2. **Article title jumps down on hover.** `.flux:not(.current):hover .item .title { top: auto !important }` overrode the base-theme `top: 0`, dropping the absolutely-positioned title to its in-flow position on hover. The override was added in #4671 (a broad font-size/line-height refactor) and looks like collateral; no other Swage rule depends on it. Removed.
3. **Settings/sort buttons drift on scroll.** Both used `position: fixed` without an explicit `top`, so they resolved to their static document position and drifted with scroll. Compounded by being inside `position: sticky` parents (Firefox bug). Fixed by:
- Making `.header` sticky so `.item.configure` (now `position: absolute; top: 0`) anchors to it.
- Splitting `#nav_menu_sort .dropdown-menu` from its siblings and making it `position: absolute` (the only one that needs to float when open).
4. **Logo hidden selector typo.** Narrow-view rule used `.item .title` (descendant) but the actual element is `.item.title` (combined class), so the logo was never hidden in narrow view. Fixed.
5. **Logo overlaps nav buttons when sidebar is collapsed.** At any viewport, collapsing the sidebar leaves the absolutely-positioned logo overlapping the now-wider nav. Added `body:has(.aside:not(.visible)) .header .item.title { display: none }` to hide the logo whenever the sidebar isn't expanded. Trade-off: the logo is no longer visible when the sidebar is collapsed at any width. Keeping it visible would require repositioning or resizing the logo itself, which is a redesign rather than a bug fix.
6. **Forced two-row nav at narrow widths even when one row would fit.** Narrow layout used absolute positioning to pin a second row of buttons at `top: 36px`. Replaced with `display: flex; flex-wrap: wrap`, scoped to article-list bodies (`body:is(.normal, .reader, .global)`) so the settings-page custom layout is untouched.
## Screenshots
**Wide viewport, before:**
<img width="950" height="32" alt="Screenshot 2026-04-30 at 18 26 49" src="https://github.com/user-attachments/assets/58635491-3d36-46af-b4ed-45ff8893bf5a" />
**Narrow viewport, before:**
<img width="738" height="72" alt="Screenshot 2026-04-30 at 18 31 02" src="https://github.com/user-attachments/assets/9b66df9e-8677-47f3-8dfe-011c070b0010" />
**Settings and sort buttons drift on scroll (before, any viewport):**
<img width="116" height="83" alt="Screenshot 2026-04-30 at 17 48 52" src="https://github.com/user-attachments/assets/27a5a2b6-3fe7-4ee8-8cfb-4f399937bedc" />
**Article title shifts down on hover (narrow viewport, before):**
<img width="287" height="43" alt="Screenshot 2026-04-30 at 19 31 53" src="https://github.com/user-attachments/assets/642be719-9f4f-4d83-9ba9-3f584fa7684d" />
**Narrow viewport, after:**
<img width="663" height="32" alt="Screenshot 2026-04-30 at 18 26 17" src="https://github.com/user-attachments/assets/9378fc68-9942-4b5e-af21-f10eb87c474b" />
## Related
- Possibly fixes#6977 (buttons squeezed together at mobile widths in Swage).
## Notes
- `swage.rtl.css` regenerated via `npm run rtlcss`.
- `npm run stylelint` passes.
- All six fixes are small CSS bugs in the Swage theme (most in narrow-viewport nav layout, one in article-list hover); bundled as one PR for that reason. Happy to split into separate PRs if reviewers prefer.
---
- box-sizing: border-box on .nav_menu to fix 32px horizontal overflow
caused by width: 100% + padding-left: 2rem.
- Remove .flux:not(.current):hover .item .title { top: auto !important }
override that dropped article titles to their in-flow position on
hover (introduced in #4671 as collateral from a wider refactor).
- Make .header position: sticky and switch .item.configure (and
#nav_menu_sort .dropdown-menu) to position: absolute with explicit
top: 0 so the cog and sort menu no longer drift when scrolling.
- Fix .item .title -> .item.title selector typo so the logo is
actually hidden in narrow view as intended.
- Hide the logo when the sidebar is collapsed
(body:has(.aside:not(.visible))) to avoid overlap with the now-wider
nav.
- Replace the two-row absolute-positioned narrow-view nav layout with
display: flex; flex-wrap: wrap, scoped to article-list bodies so
settings/admin pages keep their custom layout.
Regenerated swage.rtl.css via npm run rtlcss. npm run stylelint passes.
Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
