feat(dashboard): improve widget scaling and fix attribute scrollbar

Implement responsive scaling for info widgets and fix sizing issues:

**1. Container-Responsive Info Widgets (style.css)**

**Calendar Widget:**
- Add flexbox layout (height: 100%, flex-direction: column)
- Change font sizes from vw to rem for better scaling
- Calendar day now uses clamp(1.5rem, 2.5rem, 3.5rem) to fill space
- Add flex-shrink: 0 to top/year, flex: 1 to day

**Weather Widget:**
- Add container wrapper (height: 100%, justify-content: space-around)
- Weather icon scales with container: clamp(2rem, 8vh, 4rem)
- Forecast text uses rem instead of vw
- Both elements marked flex-shrink: 0

**Temperature Widget:**
- Container fills height with flexbox centering
- Thermometer scales: clamp(4rem, 60%, 8rem) height
- Tube/bulb use percentages (40% width, 70% height)
- Text value uses rem units

**Clock Widget:**
- Container with space-around layout
- Clock scales with container: clamp(3rem, 60%, 6rem)
- Clock hands use percentages of clock size
- Time text uses rem units

**Location Widget:**
- Container flexbox with column layout
- Map background uses flex: 1 (was fixed 1.875rem)
- Map marker scales: clamp(1.5rem, 4vh, 3rem)
- Location text uses rem units

**2. Fix Attributes Widget Scrollbar (style.css)**
- Line 966: Change grid-auto-rows: 1fr to grid-auto-rows: minmax(0, 1fr)
- Allows rows to shrink below natural size to fit container
- Prevents overflow when widget manually positioned after auto-arrange

**3. Widget Size Constraints (widget files)**
- userAttributesWidget.js: Change minSize from {w:1, h:2} to {w:2, h:2}
  - Enforces 2x2 minimum as requested
  - Prevents cramped 1-column layout
- infoBoxWidgets.js: Change location minSize from {w:2, h:2} to {w:1, h:2}
  - Allows narrow 1x2 layout for space-constrained dashboards
  - Only widget that didn't fit on desktop screen

**Technical Details:**
- All info widgets now use rem units instead of vw for text
- Flexbox scaling ensures widgets fill their containers beautifully
- Percentage-based sizing for thermometer/clock internal elements
- clamp() used for min/preferred/max sizing across resolutions
- minmax(0, 1fr) fixes classic CSS grid overflow issue

**User-Reported Issues Fixed:**
 Info widgets scale to fill containers instead of fixed sizes
 Attributes widget no longer shows scrollbar in 2x2 (manual or auto-arranged)
 Location widget works in both 1x2 and 2x2 layouts
 All widgets maintain readability across different panel widths

Related: Dashboard v2, Epic 2, Phase 3.2
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 18:33:01 +11:00
parent b3a86d4609
commit 5dd7dcb27b
3 changed files with 71 additions and 37 deletions
@@ -31,7 +31,7 @@ export function registerUserAttributesWidget(registry, dependencies) {
icon: '⚔️',
description: 'Classic RPG stats (STR, DEX, CON, INT, WIS, CHA)',
category: 'user',
minSize: { w: 1, h: 2 },
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 2 },
requiresSchema: false,