fix(dashboard): scope h-full to xl + tighter mobile sizing on KPIs

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>

src/components/alerts/alert-rail.tsx

@@ -22,7 +22,11 @@ export function AlertRail() {
     <section
       data-testid="alert-rail"
       aria-label="Active alerts"
-      className="flex h-full flex-col gap-3"
+      // `h-full` is intentional only at xl: where the parent dashboard grid
+      // gives this rail a sibling column whose height it should match. On
+      // mobile (single-column stack) there's no fixed-height context, so
+      // forcing 100% height makes the section overflow / look stretched.
+      className="flex flex-col gap-3 xl:h-full"
     >
       <div className="flex items-baseline justify-between">
         <h2 className="text-sm font-semibold tracking-tight">Alerts</h2>