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)

src/components/GenreFilterBar.tsx

@@ -158,7 +158,7 @@ export default function GenreFilterBar({
         style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
       >
         <Filter size={14} />
-        {t('common.filterGenre')}
+        <span className="toolbar-btn-label">{t('common.filterGenre')}</span>
         {count > 0 && <span className="genre-filter-count">{count}</span>}
         {count > 0 && <FilterQuickClear onActiveChip onClear={clear} />}
       </button>

src/components/LosslessFilterButton.tsx

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

src/components/SortDropdown.tsx

@@ -98,7 +98,7 @@ export default function SortDropdown<V extends string>({ value, options, onChang
         style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}
       >
         <ArrowDownUp size={14} />
-        {current?.label ?? value}
+        <span className="toolbar-btn-label">{current?.label ?? value}</span>
       </button>
 
       {open && createPortal(

src/components/StarFilterButton.tsx

@@ -62,7 +62,7 @@ export default function StarFilterButton({ active, onChange, size = 'default' }:
       }}
     >
       <Star size={14} fill={active ? 'currentColor' : 'none'} />
-      {t('common.favorites')}
+      <span className="toolbar-btn-label">{t('common.favorites')}</span>
       {active && <FilterQuickClear onActiveChip onClear={() => onChange(false)} />}
     </button>
   );

src/components/YearFilterButton.tsx

@@ -144,7 +144,7 @@ export default function YearFilterButton({
         }}
       >
         <CalendarRange size={14} />
-        {active && activeLabel ? activeLabel : t('albums.yearFilterLabel')}
+        <span className="toolbar-btn-label">{active && activeLabel ? activeLabel : t('albums.yearFilterLabel')}</span>
         {active && <FilterQuickClear onActiveChip onClear={clear} />}
       </button>