fix: improve inventory and quests widget resizing at narrow widths

Resolved issues where inventory and quests widgets didn't properly adapt
to narrow desktop widths (~296px, 2 columns):
- Assets tab was cut off (1/3 off-screen)
- Widgets shrank vertically instead of expanding
- Sub-tabs overflowed horizontally

Changes:

1. Widget onResize Handlers (inventoryWidget.js, questsWidget.js):
   - Strengthened inventory onResize to call render() for full re-layout
   - Added quests onResize handler with re-render + width-aware styling
   - Both apply responsive CSS classes at narrow widths

2. Increased maxAutoSize for 2-Column Layouts:
   - inventoryWidget.js: h: 6 → h: 8 (creates expansion headroom)
   - questsWidget.js: h: 5 → h: 7 (user requested height)
   - Previously: defaultSize = maxAutoSize → zero expansion possible
   - Now: defaultSize < maxAutoSize → widgets can expand vertically

3. Added Missing Quests Widget Container Styles (style.css):
   - Added .rpg-quests-widget and .rpg-quests-views flex container styles
   - Proper overflow handling (hidden on container, auto on content)
   - Prevents Assets tab horizontal cut-off

4. Implemented Compact Mode CSS (style.css):
   - .rpg-inventory-compact: reduced padding, icon-only sub-tabs
   - Applied when widget width < 6 grid units
   - Prevents 3 sub-tabs from overflowing 296px container
   - Icons remain visible, labels hidden for space savings

5. Grid Engine Boolean Return (gridEngine.js):
   - setContainerWidth now returns true/false for column changes
   - Allows DashboardManager to optimize resize handling

Why This Works:
- Auto-layout expansion requires defaultSize < maxAutoSize for headroom
- Flex container styles prevent overflow with proper scroll handling
- Compact mode makes sub-tabs fit within narrow containers
- onResize handlers ensure internal layouts adapt to dimension changes

Fixes: Assets tab cut-off, vertical shrinking, sub-tab overflow at ~296px
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-05 09:47:56 +11:00
parent 7d4ed8fab4
commit a7ed100780
4 changed files with 108 additions and 11 deletions
+49
View File
@@ -6950,6 +6950,23 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
overflow-x: hidden;
}
/* Quests Widget - Flex container for proper scrolling */
.rpg-quests-widget {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* Quests Views - Scrollable content area */
.rpg-quests-views {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Sub-tabs Navigation */
.rpg-inventory-subtabs {
display: flex;
@@ -7648,6 +7665,25 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
}
}
/* Inventory Compact Mode (narrow widths, < 6 grid units) */
.rpg-inventory-compact .rpg-inventory-subtabs {
gap: 0.25rem; /* Reduced from 0.5rem */
}
.rpg-inventory-compact .rpg-inventory-subtab {
padding: 0.4rem 0.6rem; /* Reduced from 0.5rem 1rem */
font-size: 0.85rem;
}
/* Hide labels on very narrow widths, show icons only */
.rpg-inventory-compact .rpg-subtab-label {
display: none;
}
.rpg-inventory-compact .rpg-inventory-subtab i {
margin: 0;
}
/* ============================================
QUESTS SYSTEM STYLING
============================================ */
@@ -7907,6 +7943,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
background: rgba(255, 255, 255, 0.1);
}
/* Quest widget header constraints for wide layouts */
.rpg-quests-wide .rpg-quest-section-title {
max-width: 200px;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rpg-quests-wide .rpg-quest-header {
gap: 1rem;
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
.rpg-quests-subtabs {