fix(dashboard): enable smart grid layout by passing widget dimensions and removing CSS overrides

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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-04 10:54:28 +11:00
parent cd3acbab29
commit 3117cd2598
2 changed files with 11 additions and 7 deletions
+6 -1
View File
@@ -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}`);