fix(dashboard): fix attributes overflow and improve tab distribution
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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -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
|
||||
});
|
||||
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user