diff --git a/src/systems/dashboard/widgets/sceneInfoWidget.js b/src/systems/dashboard/widgets/sceneInfoWidget.js index d284161..8ce4e36 100644 --- a/src/systems/dashboard/widgets/sceneInfoWidget.js +++ b/src/systems/dashboard/widgets/sceneInfoWidget.js @@ -362,6 +362,26 @@ export function registerSceneInfoWidget(registry, dependencies) { */ onConfigChange(container, newConfig) { this.render(container, newConfig); + }, + + /** + * Handle widget resize + * @param {HTMLElement} container - Widget container + * @param {number} newW - New width in grid units + * @param {number} newH - New height in grid units + */ + onResize(container, newW, newH) { + // Apply compact mode styling at narrow widths (mirrors mobile layout) + const grid = container.querySelector('.rpg-scene-info-grid'); + if (grid) { + if (newW < 3) { + // Narrow layout: use mobile-like compact sizing + grid.classList.add('rpg-scene-info-compact'); + } else { + // Wide layout: use standard sizing + grid.classList.remove('rpg-scene-info-compact'); + } + } } }); } diff --git a/style.css b/style.css index 147f2f9..0431586 100644 --- a/style.css +++ b/style.css @@ -2779,6 +2779,38 @@ body:has(.rpg-panel.rpg-position-left) #sheld { overflow: visible; } +/* Compact mode for narrow desktop widths - mirrors mobile sizing */ +.rpg-scene-info-compact .rpg-scene-info-grid { + gap: 0.3125rem !important; + padding: 0.3125rem !important; +} + +.rpg-scene-info-compact .rpg-info-item { + padding: 0.3125rem !important; + gap: 0.3125rem !important; + border-radius: 0.3125rem !important; +} + +.rpg-scene-info-compact .rpg-info-item .item-icon { + font-size: 1rem !important; +} + +.rpg-scene-info-compact .rpg-info-item .item-value { + font-size: 0.8125rem !important; +} + +.rpg-scene-info-compact .rpg-info-item .item-label { + font-size: 0.625rem !important; +} + +.rpg-scene-info-compact .rpg-info-location .item-value { + font-size: 0.75rem !important; +} + +.rpg-scene-info-compact .rpg-info-location .item-label { + font-size: 0.625rem !important; +} + /* Mobile responsive (max-width: 1000px) */ @media (max-width: 1000px) { .rpg-widget .rpg-scene-info-grid {