From e764fdabba55e78e306ad77e2dd60bf1b5fbe4e5 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Tue, 27 Jan 2026 23:54:56 -0700
Subject: [PATCH] Compact MoodTracker layout - reduced blank space and refined
 sizing

---
 src/components/MoodTracker.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/MoodTracker.tsx b/src/components/MoodTracker.tsx
index 5f25803..fb32eba 100644
--- a/src/components/MoodTracker.tsx
+++ b/src/components/MoodTracker.tsx
@@ -198,9 +198,9 @@ export function MoodTracker() {
                 </div>
             </CardHeader>
 
-            <CardContent className="pt-6 space-y-8">
+            <CardContent className="pt-2 space-y-4">
                 {/* Mood Selection */}
-                <div className="grid grid-cols-3 gap-3 sm:gap-6">
+                <div className="grid grid-cols-3 gap-3">
                     {[
                         { id: 'good', icon: Smile, label: 'Good', color: 'emerald' },
                         { id: 'neutral', icon: Meh, label: 'Okay', color: 'amber' },
@@ -215,7 +215,7 @@ export function MoodTracker() {
                                 onClick={() => handleMoodSelect(item.id as any)}
                                 disabled={isSaving}
                                 className={cn(
-                                    "group relative flex flex-col items-center justify-center gap-3 p-4 rounded-2xl transition-all duration-300",
+                                    "group relative flex flex-col items-center justify-center gap-2 p-3 rounded-2xl transition-all duration-300",
                                     "border",
                                     isSelected
                                         ? (theme === 'light'
@@ -227,17 +227,17 @@ export function MoodTracker() {
                                 )}
                             >
                                 <div className={cn(
-                                    "p-3 rounded-xl transition-all duration-300",
+                                    "p-2 rounded-xl transition-all duration-300",
                                     isSelected
                                         ? `bg-${item.color}-500 text-white shadow-lg scale-110`
                                         : (theme === 'light'
                                             ? `bg-slate-100 text-slate-400 group-hover:text-${item.color}-500 group-hover:scale-110`
                                             : `bg-white/5 text-white/60 group-hover:text-${item.color}-400 group-hover:scale-110`)
                                 )}>
-                                    <Icon className={cn("w-6 h-6", isSelected && "animate-pulse-subtle")} />
+                                    <Icon className={cn("w-5 h-5", isSelected && "animate-pulse-subtle")} />
                                 </div>
                                 <span className={cn(
-                                    "text-xs font-semibold tracking-wide uppercase transition-colors",
+                                    "text-[10px] font-semibold tracking-wide uppercase transition-colors",
                                     isSelected
                                         ? (theme === 'light' ? `text-${item.color}-700` : "text-white")
                                         : (theme === 'light' ? "text-slate-400 group-hover:text-slate-600" : "text-white/40 group-hover:text-white/80")
@@ -252,22 +252,22 @@ export function MoodTracker() {
                 {/* Dynamic Affirmation */}
                 <div className={cn(
                     "relative overflow-hidden transition-all duration-500 ease-out",
-                    affirmation ? "opacity-100 max-h-32 translate-y-0" : "opacity-0 max-h-0 translate-y-4"
+                    affirmation ? "opacity-100 max-h-24 translate-y-0" : "opacity-0 max-h-0 translate-y-4"
                 )}>
                     <div className={cn(
-                        "rounded-xl p-4 flex gap-4 items-center border",
+                        "rounded-xl p-3 flex gap-3 items-center border",
                         theme === 'light'
                             ? "bg-indigo-50 border-indigo-100"
                             : "bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border-indigo-500/20"
                     )}>
                         <div className={cn(
-                            "p-2 rounded-full shrink-0",
+                            "p-1.5 rounded-full shrink-0",
                             theme === 'light' ? "bg-indigo-100 text-indigo-500" : "bg-indigo-500/20"
                         )}>
-                            <Quote className={cn("w-4 h-4", theme === 'light' ? "text-indigo-500" : "text-indigo-400")} />
+                            <Quote className={cn("w-3.5 h-3.5", theme === 'light' ? "text-indigo-500" : "text-indigo-400")} />
                         </div>
                         <p className={cn(
-                            "text-sm font-medium leading-relaxed",
+                            "text-xs font-medium leading-relaxed",
                             theme === 'light' ? "text-indigo-900" : "text-indigo-100/90"
                         )}>
                             {affirmation}
@@ -276,9 +276,9 @@ export function MoodTracker() {
                 </div>
 
                 {/* Mini Graph */}
-                <div className="space-y-4 pt-2">
+                <div className="space-y-3 pt-0">
                     <div className={cn(
-                        "flex items-center gap-2 text-xs font-medium uppercase tracking-widest px-1",
+                        "flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest px-1",
                         theme === 'light' ? "text-slate-400" : "text-white/40"
                     )}>
                         <TrendingUp className="w-3 h-3" />
@@ -286,7 +286,7 @@ export function MoodTracker() {
                     </div>
 
                     <div className={cn(
-                        "h-32 w-full rounded-xl border p-4 relative group",
+                        "h-28 w-full rounded-xl border p-2 relative group",
                         theme === 'light'
                             ? "bg-white/50 border-slate-200"
                             : "bg-white/5 border-white/5"