diff --git a/dashboard/index.html b/dashboard/index.html
index 7b3fca4..63c33de 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -16,6 +16,7 @@
--muted-text-color: #3342538a;
--green-color: #2ecc71;
--red-color: #e30a18;
+ --sidebar-width: clamp(200px, 22vw, 320px);
}
* {
@@ -30,13 +31,30 @@
min-height: 100vh;
display: flex;
flex-direction: column;
+ overflow: auto;
+ }
+
+ .app-layout {
+ flex: 1;
+ display: grid;
+ grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ grid-template-areas:
+ "header header"
+ "sidebar main"
+ "footer footer";
+ column-gap: 2rem;
+ min-height: 100vh;
}
header {
+ grid-area: header;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #ffffff;
padding: 2rem 1.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ position: relative;
+ z-index: 2;
}
.header-bar {
@@ -133,29 +151,28 @@
}
main {
- flex: 1;
- width: 100%;
- padding: 2rem 1rem 3rem;
- }
-
- .app-shell {
- width: min(1200px, 100%);
- margin: 0 auto;
- display: grid;
- grid-template-columns: minmax(220px, 260px) 1fr;
- gap: 1.5rem;
- align-items: start;
+ grid-area: main;
+ padding: 2rem 2.5rem;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ overflow: visible;
}
.side-panel {
+ grid-area: sidebar;
+ height: auto;
background: var(--surface-color);
- border-radius: 18px;
+ border-radius: 0;
padding: 1.5rem;
box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
gap: 1.5rem;
+ align-self: stretch;
+ overflow: visible;
+ min-height: 0;
}
.side-panel-header h2 {
@@ -223,6 +240,10 @@
display: flex;
flex-direction: column;
gap: 1.5rem;
+ max-width: 1100px;
+ margin: 0 auto;
+ width: 100%;
+ flex: 1 1 auto;
}
.content-panel {
@@ -373,21 +394,23 @@
}
footer {
+ grid-area: footer;
text-align: center;
padding: 1.25rem 1rem;
background: #ffffff;
border-top: 1px solid #d3dce6;
font-size: 0.9rem;
color: var(--muted-text-color);
+ position: relative;
+ z-index: 2;
}
body.needs-auth {
background: var(--surface-color);
+ overflow: auto;
}
- body.needs-auth header,
- body.needs-auth main,
- body.needs-auth footer {
+ body.needs-auth .app-layout {
display: none;
}
@@ -506,70 +529,88 @@
background: rgba(255, 255, 255, 0.12);
}
- @media (max-width: 960px) {
- .app-shell {
- grid-template-columns: 1fr;
+ @media (max-width: 1100px) {
+ :root {
+ --sidebar-width: clamp(180px, 26vw, 280px);
+ }
+ }
+
+ @media (max-width: 820px) {
+ :root {
+ --sidebar-width: clamp(160px, 34vw, 220px);
}
- .side-panel {
- flex-direction: column;
+ main {
+ padding: 1.5rem;
+ }
+
+ .app-layout {
+ column-gap: 1.5rem;
}
}
@media (max-width: 640px) {
- .side-nav {
- flex-direction: column;
+ :root {
+ --sidebar-width: clamp(140px, 40vw, 200px);
+ }
+
+ main {
+ padding: 1.25rem;
+ }
+
+ .app-layout {
+ column-gap: 1rem;
}
}
- 
+ 
-