From 0d179d22fc8f9b7e95e62e76c92044154bae0b23 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 24 Oct 2025 11:52:35 +1100
Subject: [PATCH] fix(mood): reduce font sizes to fit emoji and conditions in
 1x1 widget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: Mood widget at 1x1 was cutting off subtext, only showing emoji
and main text (e.g., "🧘 Focused") but hiding conditions below.

Changes:
- Reduced emoji from 1.2rem → 1rem at 1x1 size
- Reduced conditions text from 0.55rem → 0.45rem
- Tightened spacing (gap: 0.1rem, padding: 0.25rem)
- Set line-height: 1 to minimize vertical space usage
- Allow up to 3 lines of conditions text with -webkit-line-clamp
- Added responsive scaling: larger sizes (2x2+) use bigger fonts

Now fits emoji, main text, and subtext comfortably in 1x1 grid cell.
---
 .../dashboard/widgets/userMoodWidget.js       | 17 +++++++----
 style.css                                     | 30 ++++++++++++++++---
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/systems/dashboard/widgets/userMoodWidget.js b/src/systems/dashboard/widgets/userMoodWidget.js
index 6c7039e..e9b9821 100644
--- a/src/systems/dashboard/widgets/userMoodWidget.js
+++ b/src/systems/dashboard/widgets/userMoodWidget.js
@@ -98,15 +98,20 @@ export function registerUserMoodWidget(registry, dependencies) {
          * @param {number} newH - New height
          */
         onResize(container, newW, newH) {
-            // Responsive adjustments if needed
             const mood = container.querySelector('.rpg-mood');
-            if (!mood) return;
+            const emoji = container.querySelector('.rpg-mood-emoji');
+            const conditions = container.querySelector('.rpg-mood-conditions');
+            if (!mood || !emoji || !conditions) return;
 
-            // Adjust layout for narrow widgets
-            if (newW < 2) {
-                mood.style.flexDirection = 'column';
+            // Scale based on widget size
+            if (newW >= 2 && newH >= 2) {
+                // Larger widget: bigger text
+                emoji.style.fontSize = '2rem';
+                conditions.style.fontSize = '0.75rem';
             } else {
-                mood.style.flexDirection = 'row';
+                // Compact 1x1: tight spacing
+                emoji.style.fontSize = '1rem';
+                conditions.style.fontSize = '0.45rem';
             }
         }
     });
diff --git a/style.css b/style.css
index 06258c8..0697021 100644
--- a/style.css
+++ b/style.css
@@ -1358,14 +1358,36 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     height: 1.2vh;  /* vh for layout element */
 }
 
-/* Mood - rem for text */
+/* Mood widget - responsive sizing for dashboard */
+.rpg-widget .rpg-mood {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1rem;
+    height: 100%;
+    width: 100%;
+    padding: 0.25rem;
+}
+
 .rpg-widget .rpg-mood-emoji {
-    font-size: 1.5rem;
+    font-size: 1rem;
+    flex-shrink: 0;
+    cursor: text;
+    line-height: 1;
 }
 
 .rpg-widget .rpg-mood-conditions {
-    font-size: 0.75rem;
-    line-height: 1.3;
+    font-size: 0.45rem;
+    line-height: 1;
+    text-align: center;
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    max-width: 100%;
 }
 
 /* Progress bars - rem for spacing */