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: commitcd3acba(added smart grid logic that now works) Related: User feedback - World of Darkness 9 attributes needed 3×3 grid
This commit is contained in:
@@ -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}`);
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user