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:
@@ -460,9 +460,11 @@ export function registerQuestsWidget(registry, dependencies) {
|
||||
if (newW >= 3) {
|
||||
// Wide layout: constrain title width
|
||||
widget.classList.add('rpg-quests-wide');
|
||||
widget.classList.remove('rpg-quests-compact');
|
||||
} else {
|
||||
// Narrow layout: allow title to flex
|
||||
// Narrow layout: compact mode with truncated headers
|
||||
widget.classList.remove('rpg-quests-wide');
|
||||
widget.classList.add('rpg-quests-compact');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user