feat: implement responsive dashboard layout with column-aware widget sizing

**Status Tab Layout Changes:**
- User Info widget: 1x2 vertical (left column) instead of 2x1 horizontal
- User Stats widget: scales from 1x3 (narrow) to 2x3 (wide)
- User Mood widget: 1x1 positioned below User Info
- User Attributes widget: scales from 2x4 (narrow) to 3x4 (wide), full width

**Technical Changes:**
- Update widget definitions to use column-aware defaultSize() functions
- userInfoWidget: Returns 1x2 for desktop, 1x1 for mobile
- userStatsWidget: Returns 1x3 for 2 cols, 2x3 for 3+ cols
- userAttributesWidget: Returns 2x4 for 2 cols, 3x4 for 3+ cols
- Remove autoLayout from resetLayout() to preserve default positions
- Add resetWidgetSizesToDefault() to apply column-aware sizes
- Update CSS for 1x1 compact avatar (round) and 1x2 wide avatar layouts

**User Info Widget Improvements:**
- 1x2 layout: Horizontal split with name left, level right over avatar
- 1x1 layout: Round avatar with bottom nameplate (flush positioning)
- Transparent glass-style backgrounds for better avatar visibility
- Proper aspect-ratio for circular avatar in compact mode

**Result:**
- Widgets scale intelligently based on panel width (2-4 columns)
- Desktop users get larger, more spacious layouts
- Mobile/narrow screens get efficient vertical stacking
- Reset Layout respects custom positions while applying responsive sizes
- Window resize triggers autoLayout via ResizeObserver for reflow

src/systems/dashboard/dashboardManager.js

@@ -1562,7 +1562,8 @@ export class DashboardManager {
         // Skip initial switch in applyDashboardConfig since we'll switch after layout calculations
         this.applyDashboardConfig(this.defaultLayout, { skipInitialSwitch: true });
 
-        // Reset all widgets to default sizes
+        // Apply column-aware widget sizes from widget definitions
+        // This makes widgets scale properly based on screen width (2-4 columns)
         const allWidgets = [];
         this.dashboard.tabs.forEach(tab => {
             if (tab.widgets && tab.widgets.length > 0) {
@@ -1571,13 +1572,10 @@ export class DashboardManager {
         });
         this.resetWidgetSizesToDefault(allWidgets);
 
-        // Auto-layout each tab to prevent overlap (default positions may have changed)
-        this.dashboard.tabs.forEach(tab => {
-            if (tab.widgets && tab.widgets.length > 0) {
-                console.log(`[DashboardManager] Auto-laying out tab "${tab.name}" (${tab.widgets.length} widgets)`);
-                this.gridEngine.autoLayout(tab.widgets, { preserveOrder: true });
-            }
-        });
+        // Don't call autoLayout - preserve positions from defaultLayout.js
+        // Widget definitions now have column-aware sizes (defaultSize returns correct size for column count)
+        // ResizeObserver will handle column changes and trigger autoLayout when screen resizes
+        console.log('[DashboardManager] Using column-aware sizes from widget definitions, preserving positions from defaultLayout.js');
 
         // Force re-render tabs
         this.renderTabs();