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 // Call widget render function
if (definition && definition.render) { if (definition && definition.render) {
console.log(`[DashboardManager] Calling render for ${widget.type}`, element); 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); console.log(`[DashboardManager] After render, element children:`, element.children.length);
} else { } else {
console.warn(`[DashboardManager] No render function for ${widget.type}`); console.warn(`[DashboardManager] No render function for ${widget.type}`);
+5 -6
View File
@@ -1910,9 +1910,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
width: 100%; /* Full width */ 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 { .rpg-widget .rpg-classic-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 0.25rem; /* rem for spacing */ 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 */ grid-row: 3; /* Align with mood */
} }
/* Attributes as ultra-compact 2x3 grid for mobile */ /* Attributes as ultra-compact 2x3 grid for mobile (legacy panel only) */
.rpg-classic-stats-grid { .rpg-panel .rpg-classic-stats-grid {
display: grid !important; display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: repeat(3, 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; grid-row: 4 !important;
} }
/* Make attributes grid single column too for readability */ /* Make attributes grid 3-column for readability (legacy panel only) */
.rpg-classic-stats-grid { .rpg-panel .rpg-classic-stats-grid {
grid-template-columns: repeat(3, 1fr) !important; /* 3 columns for attributes */ grid-template-columns: repeat(3, 1fr) !important; /* 3 columns for attributes */
grid-template-rows: repeat(2, 1fr) !important; /* 2 rows */ grid-template-rows: repeat(2, 1fr) !important; /* 2 rows */
} }