The Alerts rail and Reminders rail were using h-full unconditionally, which
worked at xl: where the dashboard grid pairs them with a sibling chart
column, but produced weirdly stretched empty cards in the single-column
mobile stack (no fixed-height context to fill).
alert-rail / my-reminders-rail: h-full -> xl:h-full
KPI tiles + skeleton rendered the same desktop padding (p-5) and font sizes
on phone, leaving the value cramped against a wide white frame. Tighter
mobile defaults that scale up at sm:
KPITile p-3 sm:p-5, label text-[10px] sm:text-xs,
value mt-1 text-lg sm:mt-2 sm:text-2xl, value truncates
KpiTileSkeleton: matching p-3 sm:p-5 + smaller skeleton bars on mobile
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Code-review follow-up to PR10b-e:
- DetailHeaderStrip + KPITile: border-slate-200 → border-border so dark
mode doesn't paint a bright halo around the gradient strip.
- Topbar avatar: ring-white → ring-background so the 2px ring tracks
the surface (matches the sidebar footer pattern).
- KpiTileSkeleton stripe: bg-slate-100 → bg-muted for parity with
shadcn skeleton tokens in dark mode.
- Sidebar <aside>: add `relative` so the absolute-positioned
collapse-toggle button anchors to the sidebar itself rather than
the nearest positioned ancestor.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replaces flat Card-based KPI rendering with KPITile (gradient-brand-soft + accent
stripe). Adds polished gradient PageHeader to DashboardShell with eyebrow, KPI
sub-line, description. Tile-shaped skeletons replace the four CardSkeletons during
KPI load.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
