fix: reduce bottom row height by ~50%

Cap chart min-height to 250px and limit bottom row to 50vh max on
desktop so the chart and heatmap don't dominate the viewport.

Author: nathanialhenniges

apps/web/src/app/page.tsx

@@ -23,7 +23,7 @@ export default function Home() {
             <CacheEfficiency />
             <MonthlyAchievements className="col-span-2 sm:col-span-1 md:col-span-1" />
           </div>
-          <div className="grid grid-cols-1 gap-2 sm:gap-3 md:grid-cols-[1fr_auto] md:gap-4 md:min-h-0 md:flex-1 [&>*]:md:min-h-0">
+          <div className="grid grid-cols-1 gap-2 sm:gap-3 md:grid-cols-[1fr_auto] md:gap-4 md:min-h-0 md:flex-1 md:max-h-[50vh] [&>*]:md:min-h-0">
             <UsageChart />
             <HeatmapCalendar className="md:overflow-y-auto" />
           </div>

apps/web/src/components/dashboard/usage-chart.tsx

@@ -51,7 +51,7 @@ export function UsageChart() {
   );
 
   return (
-    <Card className="flex min-h-[300px] flex-col">
+    <Card className="flex min-h-[250px] flex-col">
       <CardHeader className="pb-2">
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
           <CardTitle>Usage Trend</CardTitle>