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
|
// Disable content editing once for all widgets if in edit mode
|
||||||
// (More efficient than per-widget queries - 2 queries vs 2N queries)
|
// (More efficient than per-widget queries - 2 queries vs 2N queries)
|
||||||
if (this.editManager && this.editManager.isEditMode) {
|
if (this.editManager && this.editManager.isEditMode) {
|
||||||
|
|||||||
@@ -460,9 +460,11 @@ export function registerQuestsWidget(registry, dependencies) {
|
|||||||
if (newW >= 3) {
|
if (newW >= 3) {
|
||||||
// Wide layout: constrain title width
|
// Wide layout: constrain title width
|
||||||
widget.classList.add('rpg-quests-wide');
|
widget.classList.add('rpg-quests-wide');
|
||||||
|
widget.classList.remove('rpg-quests-compact');
|
||||||
} else {
|
} else {
|
||||||
// Narrow layout: allow title to flex
|
// Narrow layout: compact mode with truncated headers
|
||||||
widget.classList.remove('rpg-quests-wide');
|
widget.classList.remove('rpg-quests-wide');
|
||||||
|
widget.classList.add('rpg-quests-compact');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7684,6 +7684,36 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
margin: 0;
|
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
|
QUESTS SYSTEM STYLING
|
||||||
============================================ */
|
============================================ */
|
||||||
@@ -7956,6 +7986,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
gap: 1rem;
|
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 */
|
/* Mobile Responsive Styles */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.rpg-quests-subtabs {
|
.rpg-quests-subtabs {
|
||||||
|
|||||||
Reference in New Issue
Block a user