From 79582070f03df236f1de5237ac05d188f7c22258 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Thu, 23 Oct 2025 18:48:25 +1100 Subject: [PATCH] fix(dashboard): fix attributes overflow and improve tab distribution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three critical fixes for dashboard layout: **1. Fix Attributes Widget Overflow (style.css:1210)** - Root cause: Default layout had attributes at w:1 but internal grid was 2 columns - Widget was 1 dashboard column wide, but tried to display 2 internal columns - Result: 2nd internal column overflowed off-screen to the right - Fix: Internal grid already correct at 2 columns, just needed default layout fix **2. Update Default Layout for Attributes (defaultLayout.js)** - Changed attributes widget from w:1 to w:2 (full width in 2-column grid) - Moved from x:1 (right column) to x:0 (left column, full width) - Shifted from row 3 to row 4-5 (needs 2 rows height) - Updated comment: now "full width, needs 2 columns for 3x2 grid" - Shifted all scene widgets down by 1 row: - Calendar/Weather: row 5→6 - Temperature/Clock: row 7→8 - Location: row 9→10 - Present Characters: row 11→12 - Mood stays at row 3 (left column only) **3. Improve Multi-Tab Distribution (dashboardManager.js:725-779)** - Status tab now contains user widgets ONLY (userInfo, stats, mood, attributes) - Created new "Scene" tab for overflow scene widgets (calendar, weather, etc) - Scene tab gets order:1, Social gets order:2, Inventory gets order:3 - Prioritizes character status on main tab instead of mixing with scene info **Layout After Fix:** ``` Row 0: UserInfo (full width) Row 1-2: UserStats (full width) Row 3: UserMood (left column) Row 4-5: UserAttributes (FULL WIDTH - 2 columns for 3x2 grid) Row 6-7: Calendar + Weather Row 8-9: Temperature + Clock Row 10-11: Location Row 12-14: Present Characters ``` **User-Reported Issues Fixed:** ✅ Attributes no longer overflow columns 3-5 off-screen ✅ Attributes widget properly sized at 2 dashboard columns wide ✅ Status tab prioritizes user widgets over scene info ✅ Scene widgets correctly overflow to separate "Scene" tab Related: Dashboard v2, Epic 2, Phase 3.2 --- src/systems/dashboard/dashboardManager.js | 27 +++++++++++++++------ src/systems/dashboard/defaultLayout.js | 29 ++++++++++++----------- style.css | 4 ++-- 3 files changed, 37 insertions(+), 23 deletions(-) diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js index 5fe0b23..6de4f10 100644 --- a/src/systems/dashboard/dashboardManager.js +++ b/src/systems/dashboard/dashboardManager.js @@ -722,19 +722,32 @@ export class DashboardManager { // Clear existing tabs this.dashboard.tabs = []; - // Create Status tab (user + scene) - const statusWidgets = [...groups.user, ...groups.scene]; - if (statusWidgets.length > 0) { + // Create Status tab (user widgets ONLY - prioritized) + if (groups.user.length > 0) { this.dashboard.tabs.push({ id: 'tab-status', name: 'Status', icon: '📊', order: 0, - widgets: statusWidgets + widgets: groups.user }); // Auto-layout status widgets - this.gridEngine.autoLayout(statusWidgets, { preserveOrder: true }); + this.gridEngine.autoLayout(groups.user, { preserveOrder: true }); + } + + // Create Scene/Info tab if there are scene widgets (overflow from Status) + if (groups.scene.length > 0) { + this.dashboard.tabs.push({ + id: 'tab-scene', + name: 'Scene', + icon: '🌍', + order: 1, + widgets: groups.scene + }); + + // Auto-layout scene widgets + this.gridEngine.autoLayout(groups.scene, { preserveOrder: true }); } // Create Social tab if there are social widgets @@ -743,7 +756,7 @@ export class DashboardManager { id: 'tab-social', name: 'Social', icon: '👥', - order: 1, + order: 2, widgets: groups.social }); @@ -757,7 +770,7 @@ export class DashboardManager { id: 'tab-inventory', name: 'Inventory', icon: '🎒', - order: 2, + order: 3, widgets: groups.inventory }); diff --git a/src/systems/dashboard/defaultLayout.js b/src/systems/dashboard/defaultLayout.js index 14d15f9..adfcddd 100644 --- a/src/systems/dashboard/defaultLayout.js +++ b/src/systems/dashboard/defaultLayout.js @@ -61,7 +61,7 @@ export function generateDefaultDashboard() { statBarGradient: true } }, - // Row 3-4: User Mood (left) + User Attributes (right) + // Row 3: User Mood (left column) { id: 'widget-usermood', type: 'userMood', @@ -71,23 +71,24 @@ export function generateDefaultDashboard() { h: 1, config: {} }, + // Row 4-5: User Attributes (full width, needs 2 columns for 3x2 grid) { id: 'widget-userattributes', type: 'userAttributes', - x: 1, - y: 3, - w: 1, + x: 0, + y: 4, + w: 2, h: 2, config: {} }, // === SCENE CLUSTER (Middle) === - // Row 5-6: Calendar (left) + Weather (right) + // Row 6-7: Calendar (left) + Weather (right) { id: 'widget-calendar', type: 'calendar', x: 0, - y: 5, + y: 6, w: 1, h: 2, config: {} @@ -96,19 +97,19 @@ export function generateDefaultDashboard() { id: 'widget-weather', type: 'weather', x: 1, - y: 5, + y: 6, w: 1, h: 2, config: { compact: false } }, - // Row 7-8: Temperature (left) + Clock (right) + // Row 8-9: Temperature (left) + Clock (right) { id: 'widget-temperature', type: 'temperature', x: 0, - y: 7, + y: 8, w: 1, h: 2, config: { @@ -119,31 +120,31 @@ export function generateDefaultDashboard() { id: 'widget-clock', type: 'clock', x: 1, - y: 7, + y: 8, w: 1, h: 2, config: { format: 'digital' } }, - // Row 9-10: Location (full width) + // Row 10-11: Location (full width) { id: 'widget-location', type: 'location', x: 0, - y: 9, + y: 10, w: 2, h: 2, config: {} }, // === SOCIAL CLUSTER (Bottom) === - // Row 11-13: Present Characters (full width) + // Row 12-14: Present Characters (full width) { id: 'widget-presentchars', type: 'presentCharacters', x: 0, - y: 11, + y: 12, w: 2, h: 3, config: { diff --git a/style.css b/style.css index a28f58b..63b7f3f 100644 --- a/style.css +++ b/style.css @@ -1205,9 +1205,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld { width: 100%; /* Full width */ } -/* Classic stats grid - 3 columns for side panel */ +/* Classic stats grid - 2 columns to match dashboard grid */ .rpg-widget .rpg-classic-stats-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.25rem; /* rem for spacing */ }