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

@@ -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;
                 }
             }