From 55f4e0aee685915162e224feb2c3dd75b6a0d925 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Wed, 5 Nov 2025 09:59:33 +1100 Subject: [PATCH] fix: apply widget responsive classes on tab switch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/systems/dashboard/dashboardManager.js | 11 ++++ src/systems/dashboard/widgets/questsWidget.js | 4 +- style.css | 58 +++++++++++++++++++ 3 files changed, 72 insertions(+), 1 deletion(-) diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js index 23bd3fc..2527823 100644 --- a/src/systems/dashboard/dashboardManager.js +++ b/src/systems/dashboard/dashboardManager.js @@ -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) { diff --git a/src/systems/dashboard/widgets/questsWidget.js b/src/systems/dashboard/widgets/questsWidget.js index 14c61e9..28f7487 100644 --- a/src/systems/dashboard/widgets/questsWidget.js +++ b/src/systems/dashboard/widgets/questsWidget.js @@ -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'); } } } diff --git a/style.css b/style.css index e06c9c7..27c349f 100644 --- a/style.css +++ b/style.css @@ -7684,6 +7684,36 @@ body:has(.rpg-panel.rpg-position-left) #sheld { margin: 0; } +/* Compact mode: truncate long header titles */ +.rpg-inventory-compact .rpg-inventory-header h4 { + font-size: 0.9rem; + max-width: 140px; /* Constrain to prevent overflow */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Compact mode: reduce header action button sizes */ +.rpg-inventory-compact .rpg-inventory-header-actions { + gap: 0.5rem; /* Reduced from 0.75rem */ +} + +.rpg-inventory-compact .rpg-inventory-add-btn { + font-size: 0; /* Hide text, show icon only */ + padding: 0.4rem; + min-width: 32px; + min-height: 32px; +} + +.rpg-inventory-compact .rpg-inventory-add-btn i { + font-size: 1rem; /* Restore icon size */ +} + +.rpg-inventory-compact .rpg-view-toggle-btn { + padding: 0.4rem; + min-width: 32px; +} + /* ============================================ QUESTS SYSTEM STYLING ============================================ */ @@ -7956,6 +7986,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld { gap: 1rem; } +/* Quest widget compact mode (narrow widths, < 3 grid units) */ +.rpg-quests-compact .rpg-quest-section-title { + font-size: 0.95rem; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rpg-quests-compact .rpg-quest-header { + gap: 0.5rem; /* Reduced from default */ +} + +.rpg-quests-compact .rpg-add-quest-btn { + font-size: 0; /* Hide text, show icon only */ + padding: 0.4rem; + min-width: 32px; + min-height: 32px; +} + +.rpg-quests-compact .rpg-add-quest-btn i { + font-size: 1rem; /* Restore icon size */ +} + +.rpg-quests-compact .rpg-quest-item { + padding: 0.5rem; /* Reduced padding */ +} + /* Mobile Responsive Styles */ @media (max-width: 768px) { .rpg-quests-subtabs {