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:
Lucas 'Paperboy' Rose-Winters
2025-11-05 09:59:33 +11:00
parent a7ed100780
commit 55f4e0aee6
3 changed files with 72 additions and 1 deletions
@@ -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');
}
}
}