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.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-23 14:12:42 +11:00
parent 122bb3194a
commit 2c37318798
2 changed files with 81 additions and 14 deletions
+59
View File
@@ -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
========================================