fix: apply widget responsive classes on tab switch
Fixed issue where compact mode styling was lost when switching tabs. Widgets now consistently show icon-only buttons and truncated headers at narrow widths, regardless of how they were rendered. Root Cause: - onTabChange() rendered widgets but never called onResize handlers - Compact classes (.rpg-inventory-compact, .rpg-quests-compact) only applied: * After auto-arrange (explicit onResize calls) * During window resize (ResizeObserver triggers) - Tab switches rendered widgets fresh WITHOUT compact classes - Result: Buttons/headers overflowed after tab switch at narrow widths Changes: 1. dashboardManager.js onTabChange() (lines 1224-1233): - Added onResize handler calls after rendering tab widgets - Iterates this.widgets Map (currently rendered widgets) - Calls definition.onResize(element, w, h) for each widget - Applies responsive styling based on widget dimensions 2. questsWidget.js onResize() (lines 463-468): - Added .rpg-quests-compact class application at < 3 grid units - Toggles between wide/compact modes based on width 3. style.css compact mode styling: - Inventory: icon-only buttons (font-size: 0), truncated headers - Quests: icon-only buttons (font-size: 0), truncated headers - Headers max-width: 140px (inventory), 120px (quests) - Buttons: 32×32px icon-only with restored icon size Flow Now: 1. Window resize → onResize called → compact classes applied ✓ 2. Auto-arrange → onResize called → compact classes applied ✓ 3. Tab switch → onResize called → compact classes applied ✓ (NEW) All three paths now apply responsive styling consistently. Fixes: "Add Item" button cut-off and header overflow after auto-arrange or tab switching at narrow widths (~296px, 2 columns)
This commit is contained in:
@@ -1221,6 +1221,17 @@ export class DashboardManager {
|
||||
});
|
||||
}
|
||||
|
||||
// Call onResize handlers for all rendered widgets to apply responsive styling
|
||||
// This ensures compact classes are applied based on widget dimensions
|
||||
console.log(`[DashboardManager] Calling onResize for ${this.widgets.size} widgets after tab switch`);
|
||||
this.widgets.forEach(widgetData => {
|
||||
if (widgetData?.definition?.onResize && widgetData.element) {
|
||||
const widget = widgetData.widget;
|
||||
console.log(`[DashboardManager] Calling onResize for ${widget.type} (${widget.w}x${widget.h})`);
|
||||
widgetData.definition.onResize(widgetData.element, widget.w, widget.h);
|
||||
}
|
||||
});
|
||||
|
||||
// Disable content editing once for all widgets if in edit mode
|
||||
// (More efficient than per-widget queries - 2 queries vs 2N queries)
|
||||
if (this.editManager && this.editManager.isEditMode) {
|
||||
|
||||
Reference in New Issue
Block a user