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/AppHeader.tsx

@@ -5,26 +5,36 @@ interface Props {
   mascot?: string;
   /** Shown next to the title when the mouse is reachable but the firmware is not. */
   status?: ReactNode;
+  /** The phone size: a smaller mascot and title. */
+  compact?: boolean;
 }
 
-export function AppHeader({ title = "Musik Delfin", mascot = "/dolphin-mascot.png", status }: Props) {
+export function AppHeader({
+  title = "Musik Delfin",
+  mascot = "/dolphin-mascot.png",
+  status,
+  compact = false,
+}: Props) {
+  const mascotSize = compact ? 44 : 64;
   return (
     <div
       style={{
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        gap: 16,
+        gap: compact ? 10 : 16,
         // The status bar is translucent in standalone mode, so make room for it.
-        padding: "calc(18px + env(safe-area-inset-top)) 32px 6px",
+        padding: compact
+          ? "calc(12px + env(safe-area-inset-top)) 16px 4px"
+          : "calc(18px + env(safe-area-inset-top)) 32px 6px",
         flex: "none",
         position: "relative",
       }}
     >
-      <img src={mascot} alt="" style={{ width: 64, height: 64, objectFit: "contain" }} />
+      <img src={mascot} alt="" style={{ width: mascotSize, height: mascotSize, objectFit: "contain" }} />
       <div
         style={{
-          fontSize: 34,
+          fontSize: compact ? 28 : 34,
           fontWeight: 900,
           color: "var(--paper)",
           textShadow: "0 3px 14px oklch(15% 0.05 210 / .5)",