From 8e15ce3b6aef33402f1123c6ffba01897edf265f Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 5 Nov 2025 11:17:32 +1100
Subject: [PATCH] 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.
---
 src/systems/dashboard/widgets/userInfoWidget.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/systems/dashboard/widgets/userInfoWidget.js b/src/systems/dashboard/widgets/userInfoWidget.js
index d166181..249c023 100644
--- a/src/systems/dashboard/widgets/userInfoWidget.js
+++ b/src/systems/dashboard/widgets/userInfoWidget.js
@@ -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