From 9a5be44a7f2223a5f392c834e504fba7d58ac650 Mon Sep 17 00:00:00 2001
From: Daniel Legt <contact@danlegt.com>
Date: Mon, 1 Jun 2026 12:01:39 +0300
Subject: [PATCH] refactor(admin): use CSS custom properties for bar chart
 heights

Refactors the admin dashboard bar charts to use CSS custom properties (`--bar-height`) instead of fragile inline `height` styles.

Changes include:
- Updating the HTML templates to pass the height as a CSS variable.
- Converting the `.bar-chart` layout from Flexbox to CSS Grid for more consistent column distribution.
- Using absolute positioning for `.bar-chart-bar` inside `.bar-chart-track`.
- Adding a Go test to verify that the dashboard renders the CSS variable and no longer uses inline height styles.
---
 backend/libs/handlers/accounts_test.go | 22 ++++++++++++
 backend/static/css/50-admin.css        | 48 +++++++++++++++++---------
 backend/templates/pages/admin.html     |  4 +--
 3 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/backend/libs/handlers/accounts_test.go b/backend/libs/handlers/accounts_test.go
index 9df0b22..8476fb3 100644
--- a/backend/libs/handlers/accounts_test.go
+++ b/backend/libs/handlers/accounts_test.go
@@ -724,6 +724,28 @@ func TestAdminOverviewChartsUseZeroAndFullHeights(t *testing.T) {
 	}
 }
 
+func TestAdminOverviewRendersBarHeightVariables(t *testing.T) {
+	app, cleanup := newTestApp(t)
+	defer cleanup()
+	adminToken := createAdminSession(t, app)
+	uploadThroughApp(t, app)
+
+	request := httptest.NewRequest(http.MethodGet, "/admin", nil)
+	request.AddCookie(&http.Cookie{Name: userSessionCookieName, Value: adminToken})
+	response := httptest.NewRecorder()
+	app.AdminDashboard(response, request)
+	if response.Code != http.StatusOK {
+		t.Fatalf("AdminDashboard status = %d, body = %s", response.Code, response.Body.String())
+	}
+	body := response.Body.String()
+	if !strings.Contains(body, "--bar-height: 100%") {
+		t.Fatalf("admin overview did not render a full-height bar: %s", body)
+	}
+	if strings.Contains(body, `style="height:`) {
+		t.Fatalf("admin overview still uses fragile percent height styles: %s", body)
+	}
+}
+
 func TestAdminStorageProviderPagesOnlyRenderRelevantFields(t *testing.T) {
 	app, cleanup := newTestApp(t)
 	defer cleanup()
diff --git a/backend/static/css/50-admin.css b/backend/static/css/50-admin.css
index 4fc12e3..18bf943 100644
--- a/backend/static/css/50-admin.css
+++ b/backend/static/css/50-admin.css
@@ -196,53 +196,67 @@
 }
 
 .bar-chart {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(14, minmax(0, 1fr));
   align-items: stretch;
   gap: 0.4rem;
-  height: 180px;
+  min-height: 15rem;
   margin-top: 1.25rem;
   padding-top: 0.5rem;
 }
 
 .bar-chart-col {
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  flex: 1;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
-  align-items: center;
+  align-items: stretch;
   gap: 0.35rem;
-  height: 100%;
 }
 
 .bar-chart-track {
+  position: relative;
+  flex: 1 1 auto;
   width: 100%;
-  max-width: 2.2rem;
-  min-height: 0;
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  align-self: stretch;
+  max-width: 1.8rem;
+  min-height: 9rem;
+  margin: 0 auto;
+  border-bottom: 2px solid color-mix(in srgb, var(--primary, #8b5cf6) 75%, transparent);
+  border-radius: 0.45rem 0.45rem 0 0;
+  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--border) 55%, transparent));
+  overflow: hidden;
 }
 
 .bar-chart-bar {
   display: block;
-  flex: 0 0 auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
   width: 100%;
-  min-height: 0;
+  height: var(--bar-height, 0%);
   border-radius: 6px 6px 0 0;
-  background: linear-gradient(180deg, var(--primary, #8b5cf6), color-mix(in srgb, var(--primary, #8b5cf6) 55%, transparent));
+  background: linear-gradient(180deg, var(--primary-hover, #7c3aed), var(--primary, #8b5cf6));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--primary, #8b5cf6) 35%, transparent);
 }
 
 .bar-chart-value {
+  min-height: 1rem;
+  overflow: hidden;
   color: var(--foreground);
   font-size: 0.72rem;
   font-weight: 650;
+  line-height: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .bar-chart-label {
+  overflow: hidden;
   color: var(--muted-foreground);
   font-size: 0.66rem;
+  text-align: center;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/backend/templates/pages/admin.html b/backend/templates/pages/admin.html
index 1af1b5d..668bb9f 100644
--- a/backend/templates/pages/admin.html
+++ b/backend/templates/pages/admin.html
@@ -67,7 +67,7 @@
           {{range .Data.Overview.UploadDays}}
           <div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
             <span class="bar-chart-value">{{.Value}}</span>
-            <span class="bar-chart-track"><span class="bar-chart-bar" style="height: {{.Height}}%"></span></span>
+            <span class="bar-chart-track"><span class="bar-chart-bar" style="--bar-height: {{.Height}}%"></span></span>
             <span class="bar-chart-label">{{.Label}}</span>
           </div>
           {{end}}
@@ -99,7 +99,7 @@
         {{range .Data.Overview.StorageDays}}
         <div class="bar-chart-col" title="{{.Label}}: {{.Value}}">
           <span class="bar-chart-value">{{.Value}}</span>
-          <span class="bar-chart-track"><span class="bar-chart-bar" style="height: {{.Height}}%"></span></span>
+          <span class="bar-chart-track"><span class="bar-chart-bar" style="--bar-height: {{.Height}}%"></span></span>
           <span class="bar-chart-label">{{.Label}}</span>
         </div>
         {{end}}