Matt
6d665d0113
Previously the app used a binary matchMedia split at 1023.98px, so iPad portrait + half-screen-on-13"-Mac both fell into the mobile shell — neither is really mobile. The tablet tier fills that gap. - `use-is-mobile.ts` gains `useViewportTier()` returning 'mobile' | 'tablet' | 'desktop' (mobile < 768, tablet 768-1023, desktop ≥ 1024). Backed by useSyncExternalStore so render reads stay pure. `useIsMobile()` retained as a back-compat alias = `tier !== 'desktop'` so existing call sites don't have to change in lockstep. - `app-shell.tsx` now renders three branches. Mobile + desktop unchanged. Tablet renders the desktop shell, but the Sidebar lives inside a left-side `<Sheet>` opened by a new leading logo button in the Topbar. SheetContent width matches `--width-sidebar` so the open state reads consistent. Children subtree position stays invariant across tier flips so inline-edit drafts survive a resize. - `topbar.tsx` accepts an optional `leadingSlot` rendered before the back button + breadcrumbs in the LEFT column. AppShell mounts a port-logo button in that slot on tablet (or a three-bar menu icon when the port has no logo yet) that triggers the sheet. - `page-header.tsx` was the dashboard "title card looks bad on tablet" surface — the actions row was forced no-wrap at sm (640px) which crushed the title on iPad-portrait. Stack point moved from sm to lg, so tablet stacks vertically (title above, actions below); desktop returns to side-by-side. tsc clean, 1454/1454 vitest pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>