fix: correct userInfo sizing at desktop narrow and prevent character widget expansion

UserInfo Widget:
- Changed from column-based to mobile detection (window.innerWidth <= 1000)
- Desktop narrow (2-col) now correctly uses 1x2 instead of 1x1
- Mobile devices still use 1x1 compact mode with round avatar
- Ensures vertical layout at all desktop widths

PresentCharacters Widget:
- Changed maxAutoSize to match defaultSize (3x2 on desktop)
- Prevents auto-expansion to 3 rows during layout
- Stays at 2 rows to fit 1080p screens without scrolling

Fixes responsive sizing issues on desktop narrow panels.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-06 20:58:43 +11:00
parent 1d82695d74
commit 693dc346e8
2 changed files with 10 additions and 7 deletions
@@ -283,12 +283,12 @@ export function registerPresentCharactersWidget(registry, dependencies) {
}
return { w: 3, h: 2 }; // Desktop: 3 cols wide (full), 2 rows tall (fits 1080p)
},
// Column-aware max size: can expand vertically if needed
// Column-aware max size: same as default to prevent expansion
maxAutoSize: (columns) => {
if (columns <= 2) {
return { w: 2, h: 5 };
return { w: 2, h: 4 }; // Mobile: stay at 4 rows
}
return { w: 3, h: 3 }; // Desktop: can expand to 3 rows if needed
return { w: 3, h: 2 }; // Desktop: stay at 2 rows (fits 1080p without scrolling)
},
requiresSchema: false,
@@ -40,14 +40,17 @@ export function registerUserInfoWidget(registry, dependencies) {
minSize: { w: 1, h: 1 },
// Column-aware default size: vertical 1x2 with mood below
defaultSize: (columns) => {
if (columns <= 2) {
return { w: 1, h: 1 }; // Mobile: 1x1, compact
// Mobile detection: screen width ≤ 1000px uses compact 1x1
const isMobile = window.innerWidth <= 1000;
if (isMobile) {
return { w: 1, h: 1 }; // Mobile: 1x1, compact (round avatar)
}
return { w: 1, h: 2 }; // Desktop: 1x2 vertical, mood sits below
return { w: 1, h: 2 }; // Desktop (all widths): 1x2 vertical, mood sits below
},
// Column-aware max size: same as defaultSize to prevent expansion
maxAutoSize: (columns) => {
if (columns <= 2) {
const isMobile = window.innerWidth <= 1000;
if (isMobile) {
return { w: 1, h: 1 }; // Mobile: 1x1, compact
}
return { w: 1, h: 2 }; // Desktop: 1x2 vertical, mood below at y:2