From 3117cd2598130ecdfeff62ada2a4addd3ea44be2 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Tue, 4 Nov 2025 10:54:28 +1100
Subject: [PATCH] fix(dashboard): enable smart grid layout by passing widget
 dimensions and removing CSS overrides
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous commit (cd3acba) added smart column calculation but it didn't work because:
1. config._width was undefined (dashboardManager didn't pass it)
2. CSS rules with higher specificity forced 2 columns everywhere

This commit fixes BOTH issues so the 3×3 grid for 9 attributes actually works.

Changes:

1. Pass widget dimensions in dashboardManager.js (line 765):
   - Changed: definition.render(element, widget.config || {})
   - To: definition.render(element, {...widget.config, _width: widget.w, _height: widget.h})
   - Why: Widget dimensions (w, h) are in widget object, not widget.config
   - Result: Smart column calculation now receives actual widget width!

2. Remove desktop CSS override (style.css, line 1914):
   - Removed: grid-template-columns: repeat(2, 1fr);
   - Kept: gap styling
   - Why: This rule had specificity that overrode inline styles
   - Result: Widget's inline style now applies on desktop

3. Scope mobile media query to legacy panel (style.css, line 6600):
   - Changed: .rpg-classic-stats-grid { ... !important }
   - To: .rpg-panel .rpg-classic-stats-grid { ... !important }
   - Why: !important was forcing 2 columns on ALL mobile screens
   - Result: Dashboard widgets control their own layout on mobile

4. Scope narrow screen media query to legacy panel (style.css, line 6860):
   - Changed: .rpg-classic-stats-grid { ... !important }
   - To: .rpg-panel .rpg-classic-stats-grid { ... !important }
   - Why: Same as mobile - prevent override of dashboard widgets
   - Result: Dashboard widgets work on all screen sizes

Expected Behavior After Fix:
- 9 attributes → widget requests w=3 → gets 3 columns → perfect 3×3 grid! ✅
- 6 attributes → widget requests w=2 → gets 2 columns → 3×2 grid ✅
- Widget resize → onResize() updates columns → responsive ✅
- Mobile/tablet → dashboard widgets control layout → legacy panel unaffected ✅

Related: commit cd3acba (added smart grid logic that now works)
Related: User feedback - World of Darkness 9 attributes needed 3×3 grid
---
 src/systems/dashboard/dashboardManager.js |  7 ++++++-
 style.css                                 | 11 +++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js
index 839a23d..2127cdc 100644
--- a/src/systems/dashboard/dashboardManager.js
+++ b/src/systems/dashboard/dashboardManager.js
@@ -762,7 +762,12 @@ 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 || {});
+            // Pass widget dimensions along with config for layout calculations
+            definition.render(element, {
+                ...widget.config,
+                _width: widget.w,
+                _height: widget.h
+            });
             console.log(`[DashboardManager] After render, element children:`, element.children.length);
         } else {
             console.warn(`[DashboardManager] No render function for ${widget.type}`);
diff --git a/style.css b/style.css
index 2c45c86..3c79d11 100644
--- a/style.css
+++ b/style.css
@@ -1910,9 +1910,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     width: 100%; /* Full width */
 }
 
-/* Classic stats grid - 2 columns to match dashboard grid */
+/* Classic stats grid - dynamic columns set by widget logic */
 .rpg-widget .rpg-classic-stats-grid {
-    grid-template-columns: repeat(2, 1fr);
     gap: 0.5rem 0.25rem;  /* rem for spacing */
 }
 
@@ -6597,8 +6596,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         grid-row: 3; /* Align with mood */
     }
 
-    /* Attributes as ultra-compact 2x3 grid for mobile */
-    .rpg-classic-stats-grid {
+    /* Attributes as ultra-compact 2x3 grid for mobile (legacy panel only) */
+    .rpg-panel .rpg-classic-stats-grid {
         display: grid !important;
         grid-template-columns: repeat(2, 1fr) !important;
         grid-template-rows: repeat(3, 1fr) !important;
@@ -6857,8 +6856,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         grid-row: 4 !important;
     }
 
-    /* Make attributes grid single column too for readability */
-    .rpg-classic-stats-grid {
+    /* Make attributes grid 3-column for readability (legacy panel only) */
+    .rpg-panel .rpg-classic-stats-grid {
         grid-template-columns: repeat(3, 1fr) !important; /* 3 columns for attributes */
         grid-template-rows: repeat(2, 1fr) !important; /* 2 rows */
     }