From fa7b50233e942b186a9c3898d7b2e15ed03937fc Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Fri, 20 Feb 2026 14:48:54 +0800
Subject: [PATCH] Compact stat cards: ~50% shorter, recede as informational
 strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Padding: p-4 → px-3 py-2
- Number: text-3xl → text-xl
- Icons: p-2 h-5 w-5 → p-1.5 h-4 w-4
- Label/number gap: space-y-2 → space-y-0.5
- Weather: description + city inline with temp on one line
- Grid gap tightened from gap-3 to gap-2.5

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/dashboard/StatsWidget.tsx  | 57 ++++++++-----------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/dashboard/StatsWidget.tsx b/frontend/src/components/dashboard/StatsWidget.tsx
index 1c87030..4c7c815 100644
--- a/frontend/src/components/dashboard/StatsWidget.tsx
+++ b/frontend/src/components/dashboard/StatsWidget.tsx
@@ -36,21 +36,21 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
   ];
 
   return (
-    <div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-2.5 grid-cols-2 lg:grid-cols-4">
       {statCards.map((stat) => (
         <Card key={stat.label} className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-          <CardContent className="p-4">
-            <div className="flex items-start justify-between">
-              <div className="space-y-2">
-                <p className="text-[11px] font-medium tracking-wider text-muted-foreground">
+          <CardContent className="px-3 py-2">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <p className="text-[10px] font-medium tracking-wider text-muted-foreground">
                   {stat.label}
                 </p>
-                <p className="font-heading text-3xl font-bold tabular-nums leading-none">
+                <p className="font-heading text-xl font-bold tabular-nums leading-none">
                   {stat.value}
                 </p>
               </div>
-              <div className={`p-2 rounded-lg ${stat.glowBg}`}>
-                <stat.icon className={`h-5 w-5 ${stat.color}`} />
+              <div className={`p-1.5 rounded-md ${stat.glowBg}`}>
+                <stat.icon className={`h-4 w-4 ${stat.color}`} />
               </div>
             </div>
           </CardContent>
@@ -59,39 +59,32 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
 
       {/* Weather card */}
       <Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
-        <CardContent className="p-4">
-          <div className="flex items-start justify-between">
-            <div className="space-y-2">
-              <p className="text-[11px] font-medium tracking-wider text-muted-foreground">
+        <CardContent className="px-3 py-2">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="text-[10px] font-medium tracking-wider text-muted-foreground">
                 WEATHER
               </p>
               {weatherData ? (
-                <>
-                  <p className="font-heading text-3xl font-bold tabular-nums leading-none">
+                <div className="flex items-baseline gap-1.5">
+                  <p className="font-heading text-xl font-bold tabular-nums leading-none">
                     {weatherData.temp}°
                   </p>
-                  <p className="text-[11px] text-muted-foreground capitalize leading-tight">
+                  <span className="text-[10px] text-muted-foreground capitalize">
                     {weatherData.description}
-                  </p>
-                  {weatherData.city && (
-                    <p className="text-[10px] text-muted-foreground/60 leading-tight">
-                      {weatherData.city}
-                    </p>
-                  )}
-                </>
+                    {weatherData.city && (
+                      <span className="text-muted-foreground/50"> · {weatherData.city}</span>
+                    )}
+                  </span>
+                </div>
               ) : (
-                <>
-                  <p className="font-heading text-3xl font-bold tabular-nums leading-none text-muted-foreground/50">
-                    —
-                  </p>
-                  <p className="text-[11px] text-muted-foreground/50 leading-tight">
-                    No city set
-                  </p>
-                </>
+                <p className="font-heading text-xl font-bold tabular-nums leading-none text-muted-foreground/50">
+                  —
+                </p>
               )}
             </div>
-            <div className="p-2 rounded-lg bg-amber-500/10">
-              <CloudSun className="h-5 w-5 text-amber-400" />
+            <div className="p-1.5 rounded-md bg-amber-500/10">
+              <CloudSun className="h-4 w-4 text-amber-400" />
             </div>
           </div>
         </CardContent>