fix: usable layout when the window is small (#981)

* fix(layout): collapse browse toolbar to icons on compact width

On a narrow window the labelled filter buttons wrapped into several rows
and, being a fixed-height sticky header, starved the album grid below them
down to a clipped strip. Wrap each toolbar label in a hideable span and drop
to icon-only in compact (mobile) mode; icons keep their tooltip and
aria-label so the action stays discoverable.

* fix(window): raise minimum window size to 520x640

The old 360x480 floor let the window shrink far past the point the layout
holds together. Floor it at a laptop-friendly size where the compact layout
(icon toolbar + scrollable lists) still works.

* fix(player): scale mobile cover to fit short windows

The cover width was viewport-derived with no height bound, so on a short
window the square grew past its slot and overlapped the title. Bind it to
the shrinkable wrap via max-height and keep it square with auto sizing.

* docs: changelog for small-window layout fixes (#981)
This commit is contained in:
Frank Stellmacher
2026-06-04 11:16:48 +02:00
committed by GitHub
parent f3eb58c707
commit b0f35eabc9
10 changed files with 45 additions and 19 deletions
+1 -1
View File
@@ -25,7 +25,7 @@ export default function LosslessFilterButton({ active, onChange }: Props) {
}}
>
<Gem size={14} />
{t('albums.losslessLabel')}
<span className="toolbar-btn-label">{t('albums.losslessLabel')}</span>
{active && <FilterQuickClear onActiveChip onClear={() => onChange(false)} />}
</button>
);