fix(dashboard): make Scene Info widget column-aware for proper desktop sizing
Fixed Scene Info widget using fixed sizes instead of column-aware functions,
causing it to be too narrow on desktop (3-4 columns) while working fine on mobile (2 columns).
**Problem:**
- Widget had fixed `defaultSize: {w: 2, h: 2}` and `maxAutoSize: {w: 2, h: 3}`
- Worked perfectly on mobile (2 columns) → 2×3 fills width
- Too narrow on desktop (3-4 columns) → 2×3 only uses 50-66% of width
- Reset Layout/Sort/Auto-Arrange buttons couldn't scale properly
**Root Cause:**
Scene Info widget not following established pattern used by User Info and User Stats widgets,
which use column-aware functions instead of fixed size objects.
**Fix (sceneInfoWidget.js:292-303):**
Changed from fixed sizes:
```javascript
defaultSize: { w: 2, h: 2 },
maxAutoSize: { w: 2, h: 3 },
```
To column-aware functions:
```javascript
defaultSize: (columns) => {
if (columns <= 2) {
return { w: 2, h: 2 }; // Mobile: 2×2 (compact, full width)
}
return { w: 3, h: 3 }; // Desktop: 3×3 (spacious)
},
maxAutoSize: (columns) => {
if (columns <= 2) {
return { w: 2, h: 3 }; // Mobile: 2×3 max (full width)
}
return { w: 3, h: 3 }; // Desktop: 3×3 max
},
```
**Behavior:**
Mobile (≤2 columns):
- Default: 2×2 (compact)
- Max: 2×3 (can expand vertically)
- Fills entire panel width ✓
Desktop (≥3 columns):
- Default: 3×3 (spacious)
- Max: 3×3 (properly sized)
- Uses horizontal space appropriately ✓
**Result:**
- Reset Layout: Uses correct size for current column count
- Sort Widgets: Sizes correctly after sort
- Auto-Arrange: Expands to proper maxAutoSize based on columns
- Panel resize: Widget reflowed properly when columns change
- All 5 data points (date, time, weather, temp, location) visible at all sizes
Follows same pattern as User Info (lines 42-54) and User Stats (lines 38-43) widgets.
This commit is contained in:
@@ -288,8 +288,19 @@ export function registerSceneInfoWidget(registry, dependencies) {
|
|||||||
description: 'Compact scene information grid (calendar, weather, time, location)',
|
description: 'Compact scene information grid (calendar, weather, time, location)',
|
||||||
category: 'scene',
|
category: 'scene',
|
||||||
minSize: { w: 2, h: 2 },
|
minSize: { w: 2, h: 2 },
|
||||||
defaultSize: { w: 2, h: 2 },
|
// Column-aware sizing: compact on mobile, spacious on desktop
|
||||||
maxAutoSize: { w: 2, h: 3 },
|
defaultSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 2 }; // Mobile: 2×2 (compact, full width)
|
||||||
|
}
|
||||||
|
return { w: 3, h: 3 }; // Desktop: 3×3 (spacious)
|
||||||
|
},
|
||||||
|
maxAutoSize: (columns) => {
|
||||||
|
if (columns <= 2) {
|
||||||
|
return { w: 2, h: 3 }; // Mobile: 2×3 max (full width)
|
||||||
|
}
|
||||||
|
return { w: 3, h: 3 }; // Desktop: 3×3 max
|
||||||
|
},
|
||||||
requiresSchema: false,
|
requiresSchema: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user