Web frontend: touch layout for phones

Phones got the kiosk's keyboard-first layout squeezed down: shelves cut off
by the tab rail and a header taking a fifth of the screen. They now get
their own layout, chosen by a media query (narrow, or short landscape on a
touch screen); tablets and desktop are unchanged.

- Pick a group (Musik/Hörbücher/Podcasts), then a category, then scroll
  through a grid of smaller albums.
- A floating glass dock: mini player, Musik/Zimmer tabs (no typing tab - a
  phone has no keyboard for it) and a search button that turns into a real
  search field, raised above the on-screen keyboard.
- Album sheet and room page get compact phone variants.

Browse state stays in the shared UiState, so resizing or rotating keeps
your place.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/components/BrowseView.tsx

@@ -727,7 +727,7 @@ function ShelfRow({
 /** One category's 2x2 cover preview + name + count. Used both by the root shelves
  * (pointer-only) and by the in-group category grid (keyboard-navigable, hence the
  * optional `navIndex`/`selected`). */
-function CategoryTile({
+export function CategoryTile({
   entry,
   navIndex,
   selected,