From 2c37318798102b4f9cac69137ebd0ffeed1c84ec Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Thu, 23 Oct 2025 14:12:42 +1100
Subject: [PATCH] fix(dashboard): add CSS for header and container layout

Added missing CSS for dashboard v2 header and container:
- .rpg-dashboard-container: Flexbox column layout with gap
- .rpg-dashboard-header: Flexbox row with space-between
- .rpg-dashboard-header-left/right: Flex containers for button groups
- .rpg-dashboard-btn: Button styling with theme variables
- .rpg-dashboard-grid: Grid container styling

Also fixed dashboardManager.js to preserve template structure:
- Changed createContainerStructure() to query existing elements first
- Only creates elements if template didn't provide them
- Prevents clearing the entire container and losing the header

This fixes the issue where all components (header, buttons, widgets)
were stacking on top of each other due to missing layout CSS.
---
 src/systems/dashboard/dashboardManager.js | 36 ++++++++------
 style.css                                 | 59 +++++++++++++++++++++++
 2 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js
index 63935e4..21e89f6 100644
--- a/src/systems/dashboard/dashboardManager.js
+++ b/src/systems/dashboard/dashboardManager.js
@@ -190,22 +190,30 @@ export class DashboardManager {
      * Create dashboard container structure
      */
     createContainerStructure() {
-        // Clear container
-        this.container.innerHTML = '';
+        // Check if tabs and grid containers already exist (from template)
+        this.tabContainer = this.container.querySelector('#rpg-dashboard-tabs');
+        this.gridContainer = this.container.querySelector('#rpg-dashboard-grid');
 
-        // Create tab container
-        this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'rpg-dashboard-tabs';
-        this.tabContainer.id = 'rpg-dashboard-tabs';
-        this.container.appendChild(this.tabContainer);
+        // If they don't exist, create them (fallback for legacy/minimal setup)
+        if (!this.tabContainer) {
+            console.warn('[DashboardManager] Tab container not found in template, creating...');
+            this.tabContainer = document.createElement('div');
+            this.tabContainer.className = 'rpg-dashboard-tabs';
+            this.tabContainer.id = 'rpg-dashboard-tabs';
+            this.container.appendChild(this.tabContainer);
+        }
 
-        // Create grid container
-        this.gridContainer = document.createElement('div');
-        this.gridContainer.className = 'rpg-dashboard-grid';
-        this.gridContainer.id = 'rpg-dashboard-grid';
-        this.gridContainer.style.position = 'relative';
-        this.gridContainer.style.minHeight = '600px';
-        this.container.appendChild(this.gridContainer);
+        if (!this.gridContainer) {
+            console.warn('[DashboardManager] Grid container not found in template, creating...');
+            this.gridContainer = document.createElement('div');
+            this.gridContainer.className = 'rpg-dashboard-grid';
+            this.gridContainer.id = 'rpg-dashboard-grid';
+            this.gridContainer.style.position = 'relative';
+            this.gridContainer.style.minHeight = '600px';
+            this.container.appendChild(this.gridContainer);
+        }
+
+        console.log('[DashboardManager] Container structure ready');
     }
 
     /**
diff --git a/style.css b/style.css
index 41959cf..b2db25e 100644
--- a/style.css
+++ b/style.css
@@ -1040,6 +1040,65 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     transform: scale(0.95);
 }
 
+/* ========================================
+   DASHBOARD V2 CONTAINER & HEADER STYLES
+   ========================================
+   Dashboard container and header layout
+   ======================================== */
+
+.rpg-dashboard-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.rpg-dashboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.rpg-dashboard-header-left,
+.rpg-dashboard-header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.rpg-dashboard-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.75rem;
+    border: 1px solid var(--SmartThemeBorderColor);
+    background: var(--SmartThemeBlurTintColor);
+    color: var(--SmartThemeBodyColor);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.rpg-dashboard-btn:hover {
+    background: var(--SmartThemeQuoteColor);
+    transform: translateY(-1px);
+}
+
+.rpg-dashboard-btn i {
+    font-size: 0.85rem;
+}
+
+.rpg-dashboard-grid {
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+}
+
 /* ========================================
    DASHBOARD V2 WIDGET STYLES
    ========================================