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:
@@ -119,6 +119,7 @@ export class GridEngine {
|
||||
* Recalculates column count based on new width and notifies if changed.
|
||||
*
|
||||
* @param {number} width - Container width in pixels
|
||||
* @returns {boolean} True if column count changed, false otherwise
|
||||
*/
|
||||
setContainerWidth(width) {
|
||||
const oldColumns = this.columns;
|
||||
@@ -131,7 +132,10 @@ export class GridEngine {
|
||||
if (oldColumns !== this.columns && this.onColumnsChange) {
|
||||
console.log('[GridEngine] Column count changed from', oldColumns, 'to', this.columns);
|
||||
this.onColumnsChange(this.columns, oldColumns);
|
||||
return true; // Signal that columns changed
|
||||
}
|
||||
|
||||
return false; // Columns did NOT change
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user