From 122bb3194ae16c9bd7546f302ec65e68ec6e2803 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Thu, 23 Oct 2025 14:00:00 +1100
Subject: [PATCH] feat(dashboard): add auto-layout button with smart widget
 packing

Implements intelligent auto-layout system that efficiently arranges widgets to maximize space usage while respecting panel width constraints.

**Key Features:**
- Smart packing algorithm that sorts by widget area and finds optimal positions
- Respects responsive column count (2-4 columns based on panel width)
- Prefers full-width widgets when possible to eliminate gaps
- Fallback to narrower widths for better vertical packing
- Maintains minimum widget sizes

**Implementation:**
- GridEngine.autoLayout() - Core packing algorithm with collision detection
- DashboardManager.autoLayoutWidgets() - High-level API that re-renders after layout
- Auto-Arrange button in dashboard header (uses fa-table-cells-large icon)
- Event handler wired to call autoLayoutWidgets with preferFullWidth=true

**Algorithm Strategy:**
1. Sort widgets by area (largest first) for efficient packing
2. For each widget, try full-width placement first
3. Find first available position using row-by-row scan
4. If position is too far down, try narrower widths
5. Mark cells as occupied to prevent overlaps

**Testing Notes:**
- Works with current responsive column system (2-4 columns)
- Respects minimum sizes and column constraints
- Re-renders all widgets after repositioning
- Auto-saves layout changes

Part of Epic 2: Dashboard Widget Library
---
 docs/IMPLEMENTATION_PLAN.md                   |  20 +-
 index.js                                      |  10 +-
 src/core/state.js                             |   4 +-
 src/systems/dashboard/dashboardIntegration.js |  51 ++-
 src/systems/dashboard/dashboardManager.js     | 166 ++++++++--
 src/systems/dashboard/dashboardTemplate.html  |   6 +
 src/systems/dashboard/defaultLayout.js        |  75 ++++-
 src/systems/dashboard/gridEngine.js           | 294 +++++++++++++++++-
 .../dashboard/widgets/infoBoxWidgets.js       |  20 +-
 .../dashboard/widgets/inventoryWidget.js      |   4 +-
 .../widgets/presentCharactersWidget.js        |   4 +-
 .../dashboard/widgets/userStatsWidget.js      |   4 +-
 style.css                                     |  97 ++++++
 13 files changed, 668 insertions(+), 87 deletions(-)

diff --git a/docs/IMPLEMENTATION_PLAN.md b/docs/IMPLEMENTATION_PLAN.md
index d478ca2..068d264 100644
--- a/docs/IMPLEMENTATION_PLAN.md
+++ b/docs/IMPLEMENTATION_PLAN.md
@@ -708,26 +708,26 @@
 
 **Epic 2 Status:**
 
-**Core Widgets Implemented (Needs Testing):**
+**Core Widgets Implemented (Code Complete - Needs Testing):**
 - [x] Task 2.1: User Stats Widget (408 lines)
 - [x] Task 2.2: Info Box Widgets - 5 modular widgets (545 lines)
 - [x] Task 2.3: Present Characters Widget (377 lines)
 - [x] Task 2.4: Inventory Widget (925 lines)
 
-**Optional Widgets (Deferred to post-v2.0):**
+**Remaining Widgets (To Do Next):**
 - [ ] Task 2.5: Classic Stats Widget (standalone)
 - [ ] Task 2.6: Dice Roller Widget
 - [ ] Task 2.7: Last Roll Display Widget
 
-**Epic 2 Complete When (TESTING IN PROGRESS):**
-- [ ] TESTING: All core widgets converted and functional
-- [ ] TESTING: Each widget draggable and resizable
-- [ ] TESTING: All existing functionality preserved
-- [ ] TESTING: Configuration options work for each widget
-- [ ] TESTING: No regressions in data persistence
-- [ ] TESTING: Mobile responsive behavior maintained
+**Epic 2 Complete When:**
+- [ ] All 7 widgets converted and functional (4 done, 3 remaining)
+- [ ] Each widget draggable and resizable
+- [ ] All existing functionality preserved
+- [ ] Configuration options work for each widget
+- [ ] No regressions in data persistence
+- [ ] Mobile responsive behavior maintained
 
-**Next Step:** Complete integration and end-to-end testing before marking Epic 2 complete
+**Next Step:** Continue with Tasks 2.5, 2.6, 2.7 OR test/integrate existing widgets first (awaiting direction)
 
 ---
 
diff --git a/index.js b/index.js
index e3756f4..b101296 100644
--- a/index.js
+++ b/index.js
@@ -547,15 +547,21 @@ async function initUI() {
         };
 
         // Initialize dashboard
+        console.log('[RPG Companion] Current dashboard settings:', extensionSettings.dashboard);
         const manager = await initializeDashboard(dashboardDependencies);
 
         if (manager) {
             console.log('[RPG Companion] Dashboard v2 initialized successfully');
+            console.log('[RPG Companion] Manager instance:', manager);
 
-            // Check if this is first time - create default layout
-            if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs) {
+            // Check if this is first time OR if dashboard is empty - create default layout
+            if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs || extensionSettings.dashboard.tabs.length === 0) {
                 console.log('[RPG Companion] Creating default dashboard layout...');
                 createDefaultLayout(manager);
+            } else {
+                console.log('[RPG Companion] Loading saved dashboard layout with', extensionSettings.dashboard.tabs.length, 'tabs');
+                // Apply the saved layout to the manager
+                manager.applyDashboardConfig(extensionSettings.dashboard);
             }
         } else {
             console.warn('[RPG Companion] Dashboard initialization returned null, falling back to legacy rendering');
diff --git a/src/core/state.js b/src/core/state.js
index c0f7a36..ee16064 100644
--- a/src/core/state.js
+++ b/src/core/state.js
@@ -84,7 +84,9 @@ export let extensionSettings = {
         version: 2, // Dashboard config version
 
         gridConfig: {
-            columns: 12,           // Grid columns
+            // Columns calculated dynamically by GridEngine (2-4 based on panel width)
+            // Mobile (≤1000px screen): always 2 columns
+            // Desktop (>1000px screen): 2-4 columns based on panel width
             rowHeight: 80,         // Pixels per row
             gap: 12,               // Gap between widgets (px)
             snapToGrid: true,      // Auto-snap enabled
diff --git a/src/systems/dashboard/dashboardIntegration.js b/src/systems/dashboard/dashboardIntegration.js
index 0d5cff4..366b43a 100644
--- a/src/systems/dashboard/dashboardIntegration.js
+++ b/src/systems/dashboard/dashboardIntegration.js
@@ -8,7 +8,7 @@
 import { extensionName } from '../../core/config.js';
 import { extensionSettings } from '../../core/state.js';
 import { saveSettings } from '../../core/persistence.js';
-import { renderExtensionTemplateAsync } from '../../../../../extensions.js';
+import { renderExtensionTemplateAsync } from '../../../../../../extensions.js';
 import { DashboardManager } from './dashboardManager.js';
 import { WidgetRegistry } from './widgetRegistry.js';
 
@@ -136,6 +136,10 @@ function getInlineDashboardTemplate() {
                     <div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
                 </div>
                 <div class="rpg-dashboard-header-right">
+                    <button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
+                        <i class="fa-solid fa-table-cells-large"></i>
+                        <span>Auto-Arrange</span>
+                    </button>
                     <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
                         <i class="fa-solid fa-pen-to-square"></i>
                         <span>Edit</span>
@@ -183,6 +187,17 @@ function registerAllWidgets(registry, dependencies) {
  * Set up dashboard event listeners
  */
 function setupDashboardEventListeners(dependencies) {
+    // Auto-layout button
+    const autoLayoutBtn = document.querySelector('#rpg-dashboard-auto-layout');
+    if (autoLayoutBtn) {
+        autoLayoutBtn.addEventListener('click', () => {
+            if (dashboardManager) {
+                console.log('[RPG Companion] Auto-layout button clicked');
+                dashboardManager.autoLayoutWidgets({ preferFullWidth: true });
+            }
+        });
+    }
+
     // Edit mode toggle
     const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
     if (editModeBtn) {
@@ -310,28 +325,32 @@ export function createDefaultLayout(manager) {
         return;
     }
 
-    console.log('[RPG Companion] Creating default dashboard layout...');
+    console.log('[RPG Companion] Creating default dashboard layout (2-column optimized)...');
 
     const mainTab = manager.tabManager.getActiveTabId();
 
-    // Add widgets with default positions
-    // Row 1: User Stats (left) + Calendar + Weather + Temperature + Clock (right)
-    manager.addWidget('userStats', mainTab, { x: 0, y: 0, w: 6, h: 4 });
-    manager.addWidget('calendar', mainTab, { x: 6, y: 0, w: 2, h: 2 });
-    manager.addWidget('weather', mainTab, { x: 8, y: 0, w: 3, h: 2 });
-    manager.addWidget('temperature', mainTab, { x: 11, y: 0, w: 2, h: 2 });
+    // Add widgets with 2-column layout positions
+    // Row 1-2: User Stats (full width)
+    manager.addWidget('userStats', mainTab, { x: 0, y: 0, w: 2, h: 3 });
 
-    // Row 2: Location (top right) + Clock (bottom right)
-    manager.addWidget('location', mainTab, { x: 6, y: 2, w: 6, h: 2 });
-    manager.addWidget('clock', mainTab, { x: 10, y: 2, w: 2, h: 2 });
+    // Row 3: Calendar (left) + Weather (right)
+    manager.addWidget('calendar', mainTab, { x: 0, y: 3, w: 1, h: 2 });
+    manager.addWidget('weather', mainTab, { x: 1, y: 3, w: 1, h: 2 });
 
-    // Row 3: Present Characters
-    manager.addWidget('presentCharacters', mainTab, { x: 0, y: 4, w: 12, h: 4 });
+    // Row 4: Temperature (left) + Clock (right)
+    manager.addWidget('temperature', mainTab, { x: 0, y: 5, w: 1, h: 2 });
+    manager.addWidget('clock', mainTab, { x: 1, y: 5, w: 1, h: 2 });
 
-    // Row 4: Inventory
-    manager.addWidget('inventory', mainTab, { x: 0, y: 8, w: 12, h: 6 });
+    // Row 5: Location (full width)
+    manager.addWidget('location', mainTab, { x: 0, y: 7, w: 2, h: 2 });
 
-    console.log('[RPG Companion] Default layout created');
+    // Row 6-7: Present Characters (full width)
+    manager.addWidget('presentCharacters', mainTab, { x: 0, y: 9, w: 2, h: 3 });
+
+    // Row 8-13: Inventory (full width)
+    manager.addWidget('inventory', mainTab, { x: 0, y: 12, w: 2, h: 6 });
+
+    console.log('[RPG Companion] Default layout created (2-column optimized)');
 }
 
 /**
diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js
index bc7a718..63935e4 100644
--- a/src/systems/dashboard/dashboardManager.js
+++ b/src/systems/dashboard/dashboardManager.js
@@ -95,16 +95,20 @@ export class DashboardManager {
         // Create container structure
         this.createContainerStructure();
 
-        // Initialize Grid Engine
+        // Initialize Grid Engine (columns calculated dynamically)
         this.gridEngine = new GridEngine({
-            columns: this.config.columns,
             rowHeight: this.config.rowHeight,
             gap: this.config.gap,
-            container: this.gridContainer
+            container: this.gridContainer,
+            onColumnsChange: (newCols, oldCols) => {
+                console.log('[DashboardManager] Grid columns changed:', oldCols, '→', newCols);
+                // Re-render all widgets when column count changes
+                this.renderAllWidgets();
+            }
         });
 
-        // Initialize Widget Registry
-        this.registry = new WidgetRegistry();
+        // Initialize Widget Registry (use provided registry or create new one)
+        this.registry = this.config.registry || new WidgetRegistry();
 
         // Initialize Tab Manager with dashboard data structure
         // Create default tab if no tabs exist
@@ -122,11 +126,11 @@ export class DashboardManager {
         this.tabManager = new TabManager(this.dashboard);
 
         // Set current tab to active tab from TabManager
-        this.currentTabId = this.tabManager.getActiveTabId();
+        this.currentTabId = this.tabManager.activeTabId;
 
         // Register tab change listener
         this.tabManager.onChange((event, data) => {
-            if (event === 'tabChanged') {
+            if (event === 'activeTabChanged') {
                 this.onTabChange(data.tabId);
             }
         });
@@ -139,9 +143,9 @@ export class DashboardManager {
 
         // Initialize Resize Handler
         this.resizeHandler = new ResizeHandler(this.gridEngine, {
-            minWidth: 2,
+            minWidth: 1,
             minHeight: 2,
-            maxWidth: this.config.columns,
+            maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
             maxHeight: 10
         });
 
@@ -175,6 +179,9 @@ export class DashboardManager {
         // Try to load saved layout
         await this.loadLayout();
 
+        // Measure container width and set up responsive sizing
+        this.setupContainerSizing();
+
         console.log('[DashboardManager] All systems initialized');
         this.notifyChange('initialized');
     }
@@ -201,6 +208,46 @@ export class DashboardManager {
         this.container.appendChild(this.gridContainer);
     }
 
+    /**
+     * Set up container sizing and responsive behavior
+     * Measures container width and sets up ResizeObserver
+     * Also listens for viewport resize to recalculate vw/vh positions
+     */
+    setupContainerSizing() {
+        // Measure actual container width
+        const width = this.gridContainer.clientWidth || this.gridContainer.offsetWidth || 350;
+        console.log('[DashboardManager] Measured container width:', width);
+
+        // Set container width in GridEngine (triggers column calculation)
+        this.gridEngine.setContainerWidth(width);
+
+        // Set up ResizeObserver to track container width changes
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const newWidth = entry.contentRect.width;
+                    console.log('[DashboardManager] Container resized to:', newWidth);
+                    this.gridEngine.setContainerWidth(newWidth);
+                }
+            });
+
+            this.resizeObserver.observe(this.gridContainer);
+            console.log('[DashboardManager] ResizeObserver set up');
+        } else {
+            console.warn('[DashboardManager] ResizeObserver not supported, responsive sizing disabled');
+        }
+
+        // Listen for window resize to recalculate vh positions
+        // Viewport height changes affect vh calculations for vertical positioning
+        // Horizontal (%) automatically adapts to container width changes via ResizeObserver
+        this.viewportResizeHandler = () => {
+            console.log('[DashboardManager] Viewport resized, recalculating vh positions');
+            this.renderAllWidgets(); // Re-render with new vh values
+        };
+        window.addEventListener('resize', this.viewportResizeHandler);
+        console.log('[DashboardManager] Viewport resize listener added');
+    }
+
     /**
      * Add a new widget to the dashboard
      * @param {string} type - Widget type (must be registered)
@@ -356,13 +403,13 @@ export class DashboardManager {
         element.dataset.widgetId = widget.id;
         element.dataset.widgetType = widget.type;
 
-        // Position widget using grid engine
-        const pos = this.gridEngine.getPixelPosition(widget);
+        // Position widget using grid engine (responsive units for scaling)
+        const pos = this.gridEngine.getWidgetPosition(widget);
         element.style.position = 'absolute';
-        element.style.left = `${pos.left}px`;
-        element.style.top = `${pos.top}px`;
-        element.style.width = `${pos.width}px`;
-        element.style.height = `${pos.height}px`;
+        element.style.left = pos.left;    // % of container (e.g., "5.23%")
+        element.style.top = pos.top;      // vh units (e.g., "10.45vh")
+        element.style.width = pos.width;  // % of container (e.g., "45.67%")
+        element.style.height = pos.height; // vh units (e.g., "20.12vh")
 
         // Add to grid
         this.gridContainer.appendChild(element);
@@ -418,6 +465,8 @@ export class DashboardManager {
      * @param {Object} definition - Widget definition
      */
     renderWidgetContent(element, widget, definition) {
+        console.log(`[DashboardManager] renderWidgetContent called for ${widget.type}`);
+
         // Clear existing content (except resize handles and controls)
         const handles = element.querySelector('.resize-handles');
         const controls = element.querySelector('.widget-edit-controls');
@@ -427,7 +476,11 @@ export class DashboardManager {
 
         // Call widget render function
         if (definition && definition.render) {
+            console.log(`[DashboardManager] Calling render for ${widget.type}`, element);
             definition.render(element, widget.config || {});
+            console.log(`[DashboardManager] After render, element children:`, element.children.length);
+        } else {
+            console.warn(`[DashboardManager] No render function for ${widget.type}`);
         }
     }
 
@@ -437,11 +490,21 @@ export class DashboardManager {
      * @param {Object} widget - Widget data
      */
     repositionWidget(element, widget) {
-        const pos = this.gridEngine.getPixelPosition(widget);
-        element.style.left = `${pos.left}px`;
-        element.style.top = `${pos.top}px`;
-        element.style.width = `${pos.width}px`;
-        element.style.height = `${pos.height}px`;
+        const pos = this.gridEngine.getWidgetPosition(widget);
+        element.style.left = pos.left;
+        element.style.top = pos.top;
+        element.style.width = pos.width;
+        element.style.height = pos.height;
+    }
+
+    /**
+     * Re-render all widgets (repositions all widgets with current grid calculations)
+     */
+    renderAllWidgets() {
+        this.widgets.forEach((widgetData) => {
+            this.repositionWidget(widgetData.element, widgetData.widget);
+        });
+        console.log('[DashboardManager] Repositioned all widgets');
     }
 
     /**
@@ -491,7 +554,7 @@ export class DashboardManager {
      * @param {string} tabId - Tab ID to switch to
      */
     switchTab(tabId) {
-        this.tabManager.switchTab(tabId);
+        this.tabManager.setActiveTab(tabId);
     }
 
     /**
@@ -507,11 +570,17 @@ export class DashboardManager {
 
         // Render all widgets in this tab
         const tab = this.tabManager.getTab(tabId);
+        console.log(`[DashboardManager] Tab data:`, tab);
+        console.log(`[DashboardManager] Tab has ${tab?.widgets?.length || 0} widgets`);
+
         if (tab && tab.widgets) {
             tab.widgets.forEach(widget => {
+                console.log(`[DashboardManager] Rendering widget:`, widget.type, widget.id);
                 const definition = this.registry.get(widget.type);
                 if (definition) {
                     this.renderWidget(widget, definition);
+                } else {
+                    console.warn(`[DashboardManager] Widget type "${widget.type}" not found in registry`);
                 }
             });
         }
@@ -748,6 +817,49 @@ export class DashboardManager {
         this.defaultLayout = layout;
     }
 
+    /**
+     * Auto-layout widgets on current tab to efficiently use all available space
+     *
+     * Sorts and packs widgets to maximize space usage with no gaps.
+     * Respects current panel width (responsive column count).
+     * Re-renders all widgets after repositioning.
+     *
+     * @param {Object} options - Layout options
+     * @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
+     */
+    autoLayoutWidgets(options = {}) {
+        console.log('[DashboardManager] Auto-layout widgets requested');
+
+        // Get current tab
+        const currentTab = this.tabManager.getTab(this.currentTabId);
+        if (!currentTab || !currentTab.widgets || currentTab.widgets.length === 0) {
+            console.warn('[DashboardManager] No widgets to auto-layout');
+            return;
+        }
+
+        // Run auto-layout algorithm on widgets
+        const widgetsToLayout = [...currentTab.widgets];
+        this.gridEngine.autoLayout(widgetsToLayout, options);
+
+        // Update tab widgets with new positions
+        currentTab.widgets = widgetsToLayout;
+
+        // Re-render all widgets with new positions
+        this.clearGrid();
+        widgetsToLayout.forEach(widget => {
+            const definition = this.registry.get(widget.type);
+            if (definition) {
+                this.renderWidget(widget, definition);
+            }
+        });
+
+        console.log('[DashboardManager] Auto-layout complete, re-rendered widgets');
+
+        // Save changes
+        this.triggerAutoSave();
+        this.notifyChange('autoLayoutApplied', { tabId: this.currentTabId });
+    }
+
     /**
      * Trigger auto-save
      */
@@ -797,6 +909,18 @@ export class DashboardManager {
         // Clear grid
         this.clearGrid();
 
+        // Disconnect ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+
+        // Remove viewport resize listener
+        if (this.viewportResizeHandler) {
+            window.removeEventListener('resize', this.viewportResizeHandler);
+            this.viewportResizeHandler = null;
+        }
+
         // Destroy systems
         if (this.editManager) this.editManager.destroy();
         if (this.dragHandler) this.dragHandler.destroy();
diff --git a/src/systems/dashboard/dashboardTemplate.html b/src/systems/dashboard/dashboardTemplate.html
index f2c51db..8474cac 100644
--- a/src/systems/dashboard/dashboardTemplate.html
+++ b/src/systems/dashboard/dashboardTemplate.html
@@ -8,6 +8,12 @@
         </div>
 
         <div class="rpg-dashboard-header-right">
+            <!-- Auto-Layout Button -->
+            <button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
+                <i class="fa-solid fa-table-cells-large"></i>
+                <span>Auto-Arrange</span>
+            </button>
+
             <!-- Edit Mode Toggle -->
             <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
                 <i class="fa-solid fa-pen-to-square"></i>
diff --git a/src/systems/dashboard/defaultLayout.js b/src/systems/dashboard/defaultLayout.js
index 5ccfdc9..24a3357 100644
--- a/src/systems/dashboard/defaultLayout.js
+++ b/src/systems/dashboard/defaultLayout.js
@@ -8,10 +8,13 @@
 /**
  * Generate default dashboard configuration
  *
- * Creates a two-tab layout:
- * - "Status" tab: User stats, info box, present characters
+ * Creates a two-tab layout optimized for 2-column side panel:
+ * - "Status" tab: User stats, modular info widgets (calendar, weather, temp, clock, location), present characters
  * - "Inventory" tab: Full inventory widget
  *
+ * All positions sized for 2-column grid (w: 1-2, full width = 2).
+ * Layout will adapt if panel width increases to 3-4 columns.
+ *
  * @returns {Object} Default dashboard configuration
  */
 export function generateDefaultDashboard() {
@@ -19,7 +22,8 @@ export function generateDefaultDashboard() {
         version: 2,
 
         gridConfig: {
-            columns: 12,
+            // Columns calculated dynamically by GridEngine (2-4 based on panel width)
+            // Mobile: always 2, Desktop: 2-4 based on width
             rowHeight: 80,
             gap: 12,
             snapToGrid: true,
@@ -33,35 +37,80 @@ export function generateDefaultDashboard() {
                 icon: '📊',
                 order: 0,
                 widgets: [
+                    // Row 1: User Stats (full width)
                     {
                         id: 'widget-userstats',
                         type: 'userStats',
                         x: 0,
                         y: 0,
-                        w: 6,
+                        w: 2,
                         h: 3,
                         config: {
                             showClassicStats: true,
                             statBarStyle: 'gradient'
                         }
                     },
+                    // Row 2: Calendar (left) + Weather (right)
                     {
-                        id: 'widget-infobox',
-                        type: 'infoBox',
-                        x: 6,
-                        y: 0,
-                        w: 6,
+                        id: 'widget-calendar',
+                        type: 'calendar',
+                        x: 0,
+                        y: 3,
+                        w: 1,
+                        h: 2,
+                        config: {}
+                    },
+                    {
+                        id: 'widget-weather',
+                        type: 'weather',
+                        x: 1,
+                        y: 3,
+                        w: 1,
                         h: 2,
                         config: {
-                            layout: 'horizontal'
+                            compact: false
                         }
                     },
+                    // Row 3: Temperature (left) + Clock (right)
+                    {
+                        id: 'widget-temperature',
+                        type: 'temperature',
+                        x: 0,
+                        y: 5,
+                        w: 1,
+                        h: 2,
+                        config: {
+                            unit: 'celsius'
+                        }
+                    },
+                    {
+                        id: 'widget-clock',
+                        type: 'clock',
+                        x: 1,
+                        y: 5,
+                        w: 1,
+                        h: 2,
+                        config: {
+                            format: 'digital'
+                        }
+                    },
+                    // Row 4: Location (full width)
+                    {
+                        id: 'widget-location',
+                        type: 'location',
+                        x: 0,
+                        y: 7,
+                        w: 2,
+                        h: 2,
+                        config: {}
+                    },
+                    // Row 5-6: Present Characters (full width)
                     {
                         id: 'widget-presentchars',
                         type: 'presentCharacters',
                         x: 0,
-                        y: 3,
-                        w: 12,
+                        y: 9,
+                        w: 2,
                         h: 3,
                         config: {
                             cardLayout: 'grid',
@@ -81,7 +130,7 @@ export function generateDefaultDashboard() {
                         type: 'inventory',
                         x: 0,
                         y: 0,
-                        w: 12,
+                        w: 2,
                         h: 6,
                         config: {
                             defaultSubTab: 'onPerson',
diff --git a/src/systems/dashboard/gridEngine.js b/src/systems/dashboard/gridEngine.js
index b034c02..404ea3f 100644
--- a/src/systems/dashboard/gridEngine.js
+++ b/src/systems/dashboard/gridEngine.js
@@ -2,7 +2,8 @@
  * GridEngine - Core grid layout engine for widget dashboard
  *
  * Handles grid-based positioning, snapping, collision detection, and auto-reflow.
- * Uses a 12-column responsive grid system (default) with configurable row height.
+ * Uses a responsive 2-4 column grid system that adapts to panel width.
+ * Mobile devices (≤1000px screen width) always use 2 columns.
  *
  * @class GridEngine
  */
@@ -11,20 +12,25 @@ export class GridEngine {
      * Initialize grid engine with configuration
      *
      * @param {Object} config - Grid configuration
-     * @param {number} [config.columns=12] - Number of grid columns
      * @param {number} [config.rowHeight=80] - Height of each row in pixels
      * @param {number} [config.gap=12] - Gap between widgets in pixels
      * @param {boolean} [config.snapToGrid=true] - Enable auto-snapping to grid
+     * @param {HTMLElement} [config.container=null] - Container element
      */
     constructor(config = {}) {
-        this.columns = config.columns || 12;
+        // Start with 2 columns (safest default for side panel)
+        this.columns = 2;
         this.rowHeight = config.rowHeight || 80;
         this.gap = config.gap || 12;
         this.snapToGrid = config.snapToGrid !== false;
+        this.container = config.container || null;
 
         // Container width will be set dynamically
         this.containerWidth = 0;
 
+        // Callback for column changes (so DashboardManager can re-render)
+        this.onColumnsChange = config.onColumnsChange || null;
+
         console.log('[GridEngine] Initialized:', {
             columns: this.columns,
             rowHeight: this.rowHeight,
@@ -33,14 +39,61 @@ export class GridEngine {
         });
     }
 
+    /**
+     * Check if we're on a mobile device
+     * Mobile is defined as screen width ≤ 1000px
+     *
+     * @returns {boolean} True if mobile
+     */
+    isMobile() {
+        return window.innerWidth <= 1000;
+    }
+
+    /**
+     * Calculate optimal number of columns based on container width
+     *
+     * Desktop (>1000px screen):
+     *   - < 370px: 2 columns
+     *   - 370-449px: 3 columns
+     *   - ≥ 450px: 4 columns
+     *
+     * Mobile (≤1000px screen):
+     *   - Always 2 columns
+     *
+     * @param {number} containerWidth - Container width in pixels
+     * @returns {number} Number of columns (2-4)
+     */
+    calculateColumns(containerWidth) {
+        // Mobile always uses 2 columns
+        if (this.isMobile()) {
+            return 2;
+        }
+
+        // Desktop: dynamic 2-4 columns based on panel width
+        if (containerWidth < 370) return 2;
+        if (containerWidth < 450) return 3;
+        return 4;
+    }
+
     /**
      * Set container width (called when container is measured or resized)
      *
+     * Recalculates column count based on new width and notifies if changed.
+     *
      * @param {number} width - Container width in pixels
      */
     setContainerWidth(width) {
+        const oldColumns = this.columns;
         this.containerWidth = width;
-        console.log('[GridEngine] Container width set to:', width);
+        this.columns = this.calculateColumns(width);
+
+        console.log('[GridEngine] Container width set to:', width, 'Columns:', this.columns);
+
+        // Notify if column count changed (so dashboard can re-render)
+        if (oldColumns !== this.columns && this.onColumnsChange) {
+            console.log('[GridEngine] Column count changed from', oldColumns, 'to', this.columns);
+            this.onColumnsChange(this.columns, oldColumns);
+        }
     }
 
     /**
@@ -63,8 +116,9 @@ export class GridEngine {
      */
     getPixelPosition(widget) {
         if (this.containerWidth === 0) {
-            console.warn('[GridEngine] Container width not set, using default 1200px');
-            this.containerWidth = 1200;
+            console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
+            this.containerWidth = 350;
+            this.columns = this.calculateColumns(350); // Recalculate columns for fallback
         }
 
         // Calculate column width
@@ -89,6 +143,91 @@ export class GridEngine {
         return { left, top, width, height };
     }
 
+    /**
+     * Calculate responsive position from grid coordinates
+     *
+     * Returns positions as % of container width (for horizontal) and vh (for vertical).
+     * Widgets are positioned absolutely within the container, so % is relative to container.
+     *
+     * @param {Object} widget - Widget with grid coordinates
+     * @param {number} widget.x - Grid column position (0-based)
+     * @param {number} widget.y - Grid row position (0-based)
+     * @param {number} widget.w - Width in grid columns
+     * @param {number} widget.h - Height in grid rows
+     * @returns {Object} Responsive coordinates {left, top, width, height}
+     *
+     * @example
+     * // Widget at column 0, row 0, size 2x3 in 2-column grid
+     * const pos = gridEngine.getViewportPosition({ x: 0, y: 0, w: 2, h: 3 });
+     * // Returns: { left: "3%", top: "2vh", width: "94%", height: "25vh" }
+     */
+    getViewportPosition(widget) {
+        if (this.containerWidth === 0) {
+            console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
+            this.containerWidth = 350;
+            this.columns = this.calculateColumns(350);
+        }
+
+        console.log('[GridEngine] getViewportPosition DEBUG:', {
+            widgetId: widget.id,
+            widgetSize: `${widget.w}×${widget.h}`,
+            containerWidth: this.containerWidth,
+            columns: this.columns,
+            gap: this.gap
+        });
+
+        // Calculate column width as % of container
+        const gapPercent = (this.gap / this.containerWidth) * 100;
+        const totalGapsPercent = gapPercent * (this.columns + 1);
+        const colWidthPercent = (100 - totalGapsPercent) / this.columns;
+
+        console.log('[GridEngine] Calculation values:', {
+            gapPercent: gapPercent.toFixed(2) + '%',
+            totalGapsPercent: totalGapsPercent.toFixed(2) + '%',
+            colWidthPercent: colWidthPercent.toFixed(2) + '%'
+        });
+
+        // Calculate row height in vh for vertical scaling
+        const viewportHeight = window.innerHeight;
+        const rowHeightVh = (this.rowHeight / viewportHeight) * 100;
+        const gapVh = (this.gap / viewportHeight) * 100;
+
+        // Calculate positions
+        // Horizontal: % of container (since widgets are absolutely positioned within container)
+        const left = widget.x * (colWidthPercent + gapPercent) + gapPercent;
+        const width = widget.w * colWidthPercent + (widget.w - 1) * gapPercent;
+
+        console.log('[GridEngine] Position calc:', {
+            left: left.toFixed(2) + '%',
+            width: width.toFixed(2) + '%',
+            formula: `${widget.w} * ${colWidthPercent.toFixed(2)}% + ${widget.w - 1} * ${gapPercent.toFixed(2)}%`
+        });
+
+        // Vertical: vh units (scales with viewport height)
+        const top = widget.y * (rowHeightVh + gapVh) + gapVh;
+        const height = widget.h * rowHeightVh + (widget.h - 1) * gapVh;
+
+        return {
+            left: `${left.toFixed(2)}%`,
+            top: `${top.toFixed(2)}vh`,
+            width: `${width.toFixed(2)}%`,
+            height: `${height.toFixed(2)}vh`
+        };
+    }
+
+    /**
+     * Get widget position for CSS styling
+     * Returns responsive units for scaling across all screen sizes.
+     * Uses % of container for horizontal (adapts to panel width)
+     * Uses vh for vertical (adapts to viewport height)
+     *
+     * @param {Object} widget - Widget with grid coordinates
+     * @returns {Object} Position with %, vh units {left, top, width, height}
+     */
+    getWidgetPosition(widget) {
+        return this.getViewportPosition(widget);
+    }
+
     /**
      * Snap pixel coordinates to nearest grid cell
      *
@@ -106,8 +245,9 @@ export class GridEngine {
      */
     snapToCell(pixelX, pixelY) {
         if (this.containerWidth === 0) {
-            console.warn('[GridEngine] Container width not set, using default 1200px');
-            this.containerWidth = 1200;
+            console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
+            this.containerWidth = 350;
+            this.columns = this.calculateColumns(350); // Recalculate columns for fallback
         }
 
         // Calculate column width
@@ -241,4 +381,142 @@ export class GridEngine {
         // Calculate total height including gaps
         return maxY * (this.rowHeight + this.gap) + this.gap;
     }
+
+    /**
+     * Auto-layout widgets to efficiently use all available space
+     *
+     * Packs widgets in reading order (left to right, top to bottom) with no gaps.
+     * Respects current column count (responsive to panel width).
+     * Scales widgets to maximize space usage while respecting minimum sizes.
+     *
+     * Strategy:
+     * 1. Sort widgets by area (largest first) for better packing
+     * 2. For each widget, try to fit full width (all columns)
+     * 3. If widget prefers smaller size, use that
+     * 4. Find first available position from top-left
+     * 5. Ensure no overlaps
+     *
+     * @param {Array<Object>} widgets - Array of widgets to auto-layout
+     * @param {Object} options - Layout options
+     * @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
+     * @param {Object} [options.minSize={w:1, h:2}] - Minimum widget size
+     * @returns {Array<Object>} Re-positioned widgets (same array, modified in place)
+     */
+    autoLayout(widgets, options = {}) {
+        if (widgets.length === 0) return widgets;
+
+        const preferFullWidth = options.preferFullWidth !== false;
+        const minSize = options.minSize || { w: 1, h: 2 };
+
+        console.log('[GridEngine] Auto-layout started:', {
+            widgetCount: widgets.length,
+            columns: this.columns,
+            preferFullWidth,
+            minSize
+        });
+
+        // Sort widgets by area (largest first) for better packing efficiency
+        const sorted = [...widgets].sort((a, b) => {
+            const areaA = a.w * a.h;
+            const areaB = b.w * b.h;
+            if (areaB !== areaA) return areaB - areaA;
+            // If same area, sort by height (taller first)
+            return b.h - a.h;
+        });
+
+        // Track occupied cells in a 2D grid
+        const occupied = new Map(); // key: "x,y" => widget
+
+        /**
+         * Check if position is free
+         */
+        const isFree = (x, y, w, h) => {
+            for (let row = y; row < y + h; row++) {
+                for (let col = x; col < x + w; col++) {
+                    const key = `${col},${row}`;
+                    if (occupied.has(key)) return false;
+                    if (col >= this.columns) return false; // Out of bounds
+                }
+            }
+            return true;
+        };
+
+        /**
+         * Mark cells as occupied
+         */
+        const markOccupied = (widget, x, y, w, h) => {
+            for (let row = y; row < y + h; row++) {
+                for (let col = x; col < x + w; col++) {
+                    occupied.set(`${col},${row}`, widget.id);
+                }
+            }
+        };
+
+        /**
+         * Find first available position for widget of given size
+         */
+        const findPosition = (w, h) => {
+            // Start from top-left, scan row by row
+            for (let y = 0; y < 1000; y++) { // Max 1000 rows (practical limit)
+                for (let x = 0; x <= this.columns - w; x++) {
+                    if (isFree(x, y, w, h)) {
+                        return { x, y };
+                    }
+                }
+            }
+            // Fallback: stack at bottom (should never happen)
+            return { x: 0, y: 1000 };
+        };
+
+        // Process each widget
+        sorted.forEach(widget => {
+            // Determine optimal size for this widget
+            let targetW, targetH;
+
+            if (preferFullWidth) {
+                // Try to use full width when possible
+                targetW = this.columns;
+                targetH = widget.h;
+            } else {
+                // Keep original size or clamp to current column count
+                targetW = Math.min(widget.w, this.columns);
+                targetH = widget.h;
+            }
+
+            // Ensure minimum size
+            targetW = Math.max(minSize.w, Math.min(targetW, this.columns));
+            targetH = Math.max(minSize.h, targetH);
+
+            // Try to find position for preferred size
+            let pos = findPosition(targetW, targetH);
+
+            // If preferred size doesn't fit well, try smaller widths
+            if (pos.y > 100 && targetW > minSize.w) {
+                // Widget would be placed very far down, try narrower width
+                for (let tryW = targetW - 1; tryW >= minSize.w; tryW--) {
+                    const tryPos = findPosition(tryW, targetH);
+                    if (tryPos.y < pos.y) {
+                        // Found better position with narrower width
+                        pos = tryPos;
+                        targetW = tryW;
+                        break;
+                    }
+                }
+            }
+
+            // Update widget position and size
+            widget.x = pos.x;
+            widget.y = pos.y;
+            widget.w = targetW;
+            widget.h = targetH;
+
+            // Mark cells as occupied
+            markOccupied(widget, pos.x, pos.y, targetW, targetH);
+
+            console.log(`[GridEngine] Auto-layout positioned: ${widget.id} at (${pos.x},${pos.y}) size ${targetW}×${targetH}`);
+        });
+
+        console.log('[GridEngine] Auto-layout complete');
+        return widgets;
+    }
 }
diff --git a/src/systems/dashboard/widgets/infoBoxWidgets.js b/src/systems/dashboard/widgets/infoBoxWidgets.js
index 74263ff..641c136 100644
--- a/src/systems/dashboard/widgets/infoBoxWidgets.js
+++ b/src/systems/dashboard/widgets/infoBoxWidgets.js
@@ -191,8 +191,8 @@ export function registerCalendarWidget(registry, dependencies) {
         name: 'Calendar',
         icon: '📅',
         description: 'Date, weekday, month, and year display',
-        minSize: { w: 2, h: 2 },
-        defaultSize: { w: 2, h: 2 },
+        minSize: { w: 1, h: 2 },
+        defaultSize: { w: 1, h: 2 },
         requiresSchema: false,
 
         render(container, config = {}) {
@@ -277,8 +277,8 @@ export function registerWeatherWidget(registry, dependencies) {
         name: 'Weather',
         icon: '🌤️',
         description: 'Weather emoji and forecast',
-        minSize: { w: 2, h: 2 },
-        defaultSize: { w: 3, h: 2 },
+        minSize: { w: 1, h: 2 },
+        defaultSize: { w: 1, h: 2 },
         requiresSchema: false,
 
         render(container, config = {}) {
@@ -309,8 +309,8 @@ export function registerTemperatureWidget(registry, dependencies) {
         name: 'Temperature',
         icon: '🌡️',
         description: 'Temperature display with thermometer',
-        minSize: { w: 2, h: 2 },
-        defaultSize: { w: 2, h: 2 },
+        minSize: { w: 1, h: 2 },
+        defaultSize: { w: 1, h: 2 },
         requiresSchema: false,
 
         render(container, config = {}) {
@@ -348,8 +348,8 @@ export function registerClockWidget(registry, dependencies) {
         name: 'Clock',
         icon: '🕐',
         description: 'Analog clock with time display',
-        minSize: { w: 2, h: 2 },
-        defaultSize: { w: 2, h: 2 },
+        minSize: { w: 1, h: 2 },
+        defaultSize: { w: 1, h: 2 },
         requiresSchema: false,
 
         render(container, config = {}) {
@@ -396,8 +396,8 @@ export function registerLocationWidget(registry, dependencies) {
         name: 'Location',
         icon: '📍',
         description: 'Map with location display',
-        minSize: { w: 3, h: 2 },
-        defaultSize: { w: 6, h: 2 },
+        minSize: { w: 2, h: 2 },
+        defaultSize: { w: 2, h: 2 },
         requiresSchema: false,
 
         render(container, config = {}) {
diff --git a/src/systems/dashboard/widgets/inventoryWidget.js b/src/systems/dashboard/widgets/inventoryWidget.js
index 13c414c..e63435f 100644
--- a/src/systems/dashboard/widgets/inventoryWidget.js
+++ b/src/systems/dashboard/widgets/inventoryWidget.js
@@ -62,8 +62,8 @@ export function registerInventoryWidget(registry, dependencies) {
         name: 'Inventory',
         icon: '🎒',
         description: 'Full inventory system with On Person, Stored, and Assets',
-        minSize: { w: 6, h: 4 },
-        defaultSize: { w: 8, h: 6 },
+        minSize: { w: 2, h: 4 },
+        defaultSize: { w: 2, h: 6 },
         requiresSchema: false,
 
         render(container, config = {}) {
diff --git a/src/systems/dashboard/widgets/presentCharactersWidget.js b/src/systems/dashboard/widgets/presentCharactersWidget.js
index 88ecc1f..9e90161 100644
--- a/src/systems/dashboard/widgets/presentCharactersWidget.js
+++ b/src/systems/dashboard/widgets/presentCharactersWidget.js
@@ -235,8 +235,8 @@ export function registerPresentCharactersWidget(registry, dependencies) {
         name: 'Present Characters',
         icon: '👥',
         description: 'Character cards with avatars, traits, and relationships',
-        minSize: { w: 4, h: 3 },
-        defaultSize: { w: 6, h: 4 },
+        minSize: { w: 2, h: 2 },
+        defaultSize: { w: 2, h: 3 },
         requiresSchema: false,
 
         render(container, config = {}) {
diff --git a/src/systems/dashboard/widgets/userStatsWidget.js b/src/systems/dashboard/widgets/userStatsWidget.js
index d76fb54..37be315 100644
--- a/src/systems/dashboard/widgets/userStatsWidget.js
+++ b/src/systems/dashboard/widgets/userStatsWidget.js
@@ -35,8 +35,8 @@ export function registerUserStatsWidget(registry, dependencies) {
         name: 'User Stats',
         icon: '❤️',
         description: 'Health, energy, satiety bars and classic RPG stats',
-        minSize: { w: 4, h: 3 },
-        defaultSize: { w: 6, h: 4 },
+        minSize: { w: 1, h: 2 },
+        defaultSize: { w: 2, h: 3 },
         requiresSchema: false,
 
         /**
diff --git a/style.css b/style.css
index 280f771..41959cf 100644
--- a/style.css
+++ b/style.css
@@ -1040,6 +1040,103 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     transform: scale(0.95);
 }
 
+/* ========================================
+   DASHBOARD V2 WIDGET STYLES
+   ========================================
+
+   When widgets are rendered in dashboard v2 (narrow side panel),
+   stack content vertically instead of side-by-side.
+
+   Modern hybrid approach:
+   - vw/vh: Widget layout positioning (handled by GridEngine)
+   - rem: Typography and spacing (accessible, user-scalable)
+   - px: Fixed details (borders, shadows)
+   - %: Container-relative sizing
+   ======================================== */
+
+.rpg-widget .rpg-stats-content {
+    display: flex;
+    flex-direction: column;  /* Stack vertically */
+    gap: 0.75rem;  /* rem for spacing */
+}
+
+.rpg-widget .rpg-stats-left,
+.rpg-widget .rpg-stats-right {
+    flex: none;  /* Don't split 50/50 */
+    width: 100%; /* Full width */
+}
+
+/* Classic stats grid - 3 columns for side panel */
+.rpg-widget .rpg-classic-stats-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem 0.25rem;  /* rem for spacing */
+}
+
+/* Classic stat cells */
+.rpg-widget .rpg-classic-stat {
+    padding: 0.4rem 0.3rem;  /* rem for spacing */
+}
+
+/* Typography - rem for accessibility */
+.rpg-widget .rpg-classic-stat-label {
+    font-size: 0.65rem;
+}
+
+.rpg-widget .rpg-classic-stat-value {
+    font-size: 0.8rem;
+}
+
+.rpg-widget .rpg-classic-stat-btn {
+    width: 1.5rem;   /* rem for button size */
+    height: 1.5rem;
+    font-size: 0.7rem;
+}
+
+/* User info - rem for typography */
+.rpg-widget .rpg-user-info-row {
+    font-size: 0.75rem;
+    gap: 0.4rem;
+}
+
+.rpg-widget .rpg-user-name,
+.rpg-widget .rpg-level-label,
+.rpg-widget .rpg-level-value {
+    font-size: 0.75rem;
+}
+
+.rpg-widget .rpg-user-portrait {
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
+/* Stat bars - rem for text, vh for bar height */
+.rpg-widget .rpg-stat-label {
+    font-size: 0.75rem;
+}
+
+.rpg-widget .rpg-stat-value {
+    font-size: 0.8rem;
+}
+
+.rpg-widget .rpg-stat-bar {
+    height: 1.2vh;  /* vh for layout element */
+}
+
+/* Mood - rem for text */
+.rpg-widget .rpg-mood-emoji {
+    font-size: 1.5rem;
+}
+
+.rpg-widget .rpg-mood-conditions {
+    font-size: 0.75rem;
+    line-height: 1.3;
+}
+
+/* Progress bars - rem for spacing */
+.rpg-widget .rpg-stats-grid {
+    gap: 0.5rem;
+}
+
 /* ============================================
    INFO BOX SECTION
    ============================================ */