From 4994c0956392ce073402dd6e2722a3512958f2ec Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 24 Oct 2025 15:50:55 +1100
Subject: [PATCH] feat(dashboard): implement column-aware widget sizing for
 optimal mobile/desktop layouts

PROBLEM:
- Mobile (2-col): userInfo defaulted to 2x1 (full width), pushed mood to row 2
- After mobile CSS fixes, 1x1 widgets display perfectly
- Want userInfo 1x1 + mood 1x1 side-by-side in top row on mobile
- Desktop (3-4 col): userInfo should still expand to 2x1 for better space usage

SOLUTION:
- gridEngine: Support maxAutoSize as function (receives column count)
- userInfoWidget:
  - Changed defaultSize from 2x1 to 1x1 (starts compact)
  - Changed maxAutoSize to column-aware function:
    * 2 columns (mobile): maxAutoSize 1x1 (stays compact)
    * 3-4 columns (desktop): maxAutoSize 2x1 (can expand)

BEHAVIOR:
- Auto-layout resets widgets to defaultSize (1x1)
- Expansion pass grows widgets up to maxAutoSize based on available space
- Mobile: userInfo stays 1x1, mood can fit beside it (row 0: [userInfo][mood])
- Desktop: userInfo can expand to 2x1 if space available

AFFECTED:
- gridEngine.js: getWidgetMaxSize() now calls maxAutoSize(columns) if function
- userInfoWidget.js: Column-aware maxAutoSize, compact 1x1 defaultSize
---
 src/systems/dashboard/gridEngine.js             |  5 +++++
 src/systems/dashboard/widgets/userInfoWidget.js | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/systems/dashboard/gridEngine.js b/src/systems/dashboard/gridEngine.js
index e2cc299..dba508a 100644
--- a/src/systems/dashboard/gridEngine.js
+++ b/src/systems/dashboard/gridEngine.js
@@ -599,6 +599,11 @@ export class GridEngine {
             if (this.registry && widget.type) {
                 const definition = this.registry.get(widget.type);
                 if (definition && definition.maxAutoSize) {
+                    // Support maxAutoSize as function (column-aware sizing)
+                    if (typeof definition.maxAutoSize === 'function') {
+                        return definition.maxAutoSize(this.columns);
+                    }
+                    // Static maxAutoSize object
                     return definition.maxAutoSize;
                 }
             }
diff --git a/src/systems/dashboard/widgets/userInfoWidget.js b/src/systems/dashboard/widgets/userInfoWidget.js
index 96234e5..3f1f970 100644
--- a/src/systems/dashboard/widgets/userInfoWidget.js
+++ b/src/systems/dashboard/widgets/userInfoWidget.js
@@ -38,8 +38,14 @@ export function registerUserInfoWidget(registry, dependencies) {
         description: 'User avatar, name, and level display',
         category: 'user',
         minSize: { w: 1, h: 1 },
-        defaultSize: { w: 2, h: 1 },
-        maxAutoSize: { w: 2, h: 1 }, // Max size for auto-arrange expansion
+        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
+        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
+        },
         requiresSchema: false,
 
         /**