From ac5bd22e553b64f0a4cf848ee35d9cb2c991c3a5 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 24 Oct 2025 16:36:18 +1100
Subject: [PATCH] feat(dashboard): optimize 3-4 column desktop layout + fix
 mobile widget issues

DESKTOP LAYOUT OPTIMIZATION (3-4 columns):
- userInfo: Changed maxAutoSize from 2x1 to 1x2 (expands vertically)
- userStats: Changed to column-aware function, 3x3 in 3-4 col (full width horizontal)
- Layout: userInfo 1x2 (left) + mood 1x1 (top-right), stats 3x3 below (full width)
- Result: Better horizontal space utilization, less vertical stacking

MOBILE FIXES (Dashboard v2):
1. Refresh button visibility
   - Added #rpg-dashboard-container to CSS selector
   - Now shows with Dashboard v2, not just old panel UI

2. Stats widget Arousal bar clipping
   - Added padding-bottom: 0.5rem to .rpg-stats-grid
   - Prevents last stat bar from being cut off

3. Mood conditions text too small
   - Increased from 0.45rem to 0.6rem with line-height 1.2
   - "Focused, Awakening Qi" now readable under emoji

AFFECTED:
- userInfoWidget.js: maxAutoSize 1x2 for desktop vertical expansion
- userStatsWidget.js: Column-aware maxAutoSize function (2x2 mobile, 3x3 desktop)
- style.css: Mobile refresh visibility, stats padding, mood text size
---
 src/systems/dashboard/widgets/userInfoWidget.js  |  4 ++--
 src/systems/dashboard/widgets/userStatsWidget.js |  8 +++++++-
 style.css                                        | 15 +++++++++++++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/systems/dashboard/widgets/userInfoWidget.js b/src/systems/dashboard/widgets/userInfoWidget.js
index 3f1f970..59dfd00 100644
--- a/src/systems/dashboard/widgets/userInfoWidget.js
+++ b/src/systems/dashboard/widgets/userInfoWidget.js
@@ -39,12 +39,12 @@ export function registerUserInfoWidget(registry, dependencies) {
         category: 'user',
         minSize: { w: 1, h: 1 },
         defaultSize: { w: 1, h: 1 }, // Start compact (1x1), expansion will grow it based on columns
-        // Column-aware max size: mobile (2-col) stays 1x1, desktop (3-4 col) can expand to 2x1
+        // Column-aware max size: mobile (2-col) stays 1x1, desktop (3-4 col) expands vertically to 1x2
         maxAutoSize: (columns) => {
             if (columns <= 2) {
                 return { w: 1, h: 1 }; // Mobile: stay compact to allow mood widget beside it
             }
-            return { w: 2, h: 1 }; // Desktop: can span 2 columns
+            return { w: 1, h: 2 }; // Desktop: expand vertically, mood fits top-right
         },
         requiresSchema: false,
 
diff --git a/src/systems/dashboard/widgets/userStatsWidget.js b/src/systems/dashboard/widgets/userStatsWidget.js
index 20aa3e8..927794c 100644
--- a/src/systems/dashboard/widgets/userStatsWidget.js
+++ b/src/systems/dashboard/widgets/userStatsWidget.js
@@ -34,7 +34,13 @@ export function registerUserStatsWidget(registry, dependencies) {
         category: 'user',
         minSize: { w: 1, h: 2 },
         defaultSize: { w: 2, h: 2 },
-        maxAutoSize: { w: 3, h: 3 }, // Max size for auto-arrange expansion
+        // Column-aware max size: full width in 3-4 col for horizontal spread
+        maxAutoSize: (columns) => {
+            if (columns <= 2) {
+                return { w: 2, h: 2 }; // Mobile: use full 2-col width
+            }
+            return { w: 3, h: 3 }; // Desktop: span 3 columns horizontally
+        },
         requiresSchema: false,
 
         /**
diff --git a/style.css b/style.css
index 2e0f000..fe5f7bb 100644
--- a/style.css
+++ b/style.css
@@ -3790,8 +3790,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         display: flex;
     }
 
-    /* Show refresh button when panel is open AND not hidden by generation mode */
-    body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
+    /* Show refresh button when panel is open OR Dashboard v2 is visible, AND not hidden by generation mode */
+    body:has(.rpg-panel.rpg-mobile-open, #rpg-dashboard-container) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
         opacity: 1;
         pointer-events: auto;
     }
@@ -4321,6 +4321,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         line-height: 1.1 !important;
     }
 
+    /* User Stats Widget - add bottom padding to prevent last bar (Arousal) from being clipped */
+    .rpg-widget .rpg-stats-grid {
+        padding-bottom: 0.3rem !important;
+    }
+
+    /* Mood Widget - increase conditions text size for readability */
+    .rpg-widget .rpg-mood-conditions {
+        font-size: 0.6rem !important;
+        line-height: 1.2 !important;
+    }
+
     /* ========================================
        MOBILE STATS TAB LAYOUT IMPROVEMENTS
        ======================================== */