feat(mobile): sidebar nav becomes an app-grid on mobile (#7)

Below the desktop breakpoint (<1024px), the open/expanded sidebar's primary nav
renders as a 3-column grid of icon tiles with the title centered below each icon
(app-grid feel), instead of the desktop vertical list. Desktop and the collapsed
icon rail are unchanged.

- Scoped to `.sidebar-nav` so the footer "More" links are untouched.
- Token-only (no raw measurements), high specificity via the sidebar-expanded
  prefix (no !important). Labels wrap at spaces, not mid-word.
- Validated live in-browser; lint clean.

Option A (grid shows on the open mobile menu). An always-on variant was deferred —
it would require widening/overlaying the mobile sidebar.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

css/tailwind.source.css

@@ -4714,6 +4714,51 @@
     justify-content: flex-start;
   }
 
+  /* Mobile (below the desktop breakpoint): render the OPEN (expanded) sidebar's
+     primary nav as an app-grid — icon tiles with the title centered below each
+     icon — instead of the desktop vertical list. Desktop and the collapsed icon
+     rail are unchanged. Scoped to `.sidebar-nav` so the footer "More" links are
+     untouched. Uses the sidebar-expanded prefix for specificity (no !important). */
+  @media (max-width: calc(theme("screens.lg") - var(--breakpoint-edge-offset))) {
+    body.sidebar-expanded #sidebar .sidebar-nav,
+    #sidebar.sidebar-expanded .sidebar-nav {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: var(--space-2xs);
+      align-items: start;
+    }
+
+    body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link,
+    #sidebar.sidebar-expanded .sidebar-nav .sidebar-nav-link {
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      text-align: center;
+      gap: var(--space-2xs);
+      width: 100%;
+      min-height: 0;
+      padding-block: var(--space-xs);
+      padding-inline: var(--space-3xs);
+      /* the desktop hover slide is meaningless for centered tiles */
+      --sidebar-nav-translate-x: 0;
+    }
+
+    body.sidebar-expanded #sidebar .sidebar-nav .sidebar-nav-link .sidebar-text,
+    #sidebar.sidebar-expanded
+      .sidebar-nav
+      .sidebar-nav-link
+      .sidebar-text {
+      font-size: var(--font-size-2xs);
+      font-weight: 600;
+      line-height: 1.1;
+      text-align: center;
+      /* wrap at spaces, not mid-word (so "Recently Added" breaks cleanly) */
+      overflow-wrap: break-word;
+      word-break: normal;
+      hyphens: none;
+    }
+  }
+
   body.sidebar-collapsed #sidebar .sidebar-text,
   #sidebar.sidebar-collapsed .sidebar-text {
     display: none;

todo/TODO_2026-06-20_pre-launch.md

@@ -462,6 +462,14 @@ toward freshness and looked identical. Gave each a structural identity:
 - [ ] Improve mobile layout and the video card layout.
 - [ ] **Improve mobile UI** broadly (reiterated 2026-06-25) — not just the card: nav/
       sidebar, modals, the player, forms, and touch targets across the app.
+  - [x] **Mobile sidebar nav → app-grid (2026-06-25).** Below the desktop breakpoint
+        (<1024px), the OPEN/expanded sidebar's primary nav renders as a 3-column grid
+        of icon tiles with the title centered below each icon (app-grid feel), instead
+        of the desktop vertical list. Desktop + the collapsed icon rail are unchanged;
+        scoped to `.sidebar-nav` (footer "More" links untouched); token-only, no
+        `!important` (sidebar-expanded specificity). `css/tailwind.source.css`.
+        Validated live in-browser. (Option A: shows on the open mobile menu; an
+        always-on variant was deferred — would need the sidebar widened/overlaid.)
 - [ ] Consider removing the CDN/WebTorrent source badge from the card (clutter).
 - [ ] Run `npm run test:visual` after layout changes; update baselines deliberately.