fix: keep user info widget horizontal layout at narrow widths

Changed layout breakpoint from newW < 2 to newW < 1 and reverted height
from h:2 back to h:1 for narrow widths.

Issue: Previous h:2 change broke character tab layout by making widget too
tall. The real problem was using vertical layout at w:1, which requires
~76px height.

Solution: Keep horizontal layout (avatar left, text right) even at w:1,
which only needs ~42px height and fits in a single grid unit. Vertical
layout is now only triggered at w < 1 (ultra-narrow, effectively never).

This matches mobile's behavior where horizontal layout works fine even in
narrow 2-column mode, minimizing vertical space usage.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-05 11:17:32 +11:00
parent babd2af345
commit 8e15ce3b6a
@@ -41,14 +41,14 @@ export function registerUserInfoWidget(registry, dependencies) {
// Column-aware default size: start at 2x1 in desktop so mood doesn't block expansion
defaultSize: (columns) => {
if (columns <= 2) {
return { w: 1, h: 1 }; // Mobile: compact 1x1
return { w: 1, h: 1 }; // Mobile: 1x1, horizontal layout
}
return { w: 2, h: 1 }; // Desktop: 2x1 from the start
},
// Column-aware max size: same as defaultSize to prevent further expansion
maxAutoSize: (columns) => {
if (columns <= 2) {
return { w: 1, h: 1 }; // Mobile: stay compact to allow mood widget beside it
return { w: 1, h: 1 }; // Mobile: 1x1, horizontal layout
}
return { w: 2, h: 1 }; // Desktop: 2x1, mood sits in top-right
},
@@ -161,10 +161,11 @@ export function registerUserInfoWidget(registry, dependencies) {
}
// Flexible hybrid layout based on width:
// - 1 column (1x1, 1x2): Centered avatar with text below
// - 2+ columns: Side-by-side (avatar left, text right)
if (newW < 2) {
// Compact vertical layout: centered avatar with text below
// - Ultra-narrow (< 1): Centered avatar with text below (rare)
// - 1+ columns: Side-by-side (avatar left, text right)
// Keep horizontal layout even at w:1 to minimize vertical space usage
if (newW < 1) {
// Ultra-compact vertical layout: centered avatar with text below
infoContainer.classList.add('rpg-layout-vertical');
infoContainer.classList.remove('rpg-layout-horizontal');
// Avatar size handled by compact class
@@ -174,6 +175,7 @@ export function registerUserInfoWidget(registry, dependencies) {
}
} else {
// Horizontal layout: avatar left, text right
// This layout works at w:1 and uses less vertical space (~42px vs ~76px)
infoContainer.classList.add('rpg-layout-horizontal');
infoContainer.classList.remove('rpg-layout-vertical');
// Avatar size handled by compact class