fix(admin): improve overview bar chart layout and alignment

backend/libs/handlers/accounts_test.go

@@ -695,6 +695,35 @@ func TestAPIDocsHeaderReflectsLoggedOutUser(t *testing.T) {
 	}
 }
 
+func TestAdminOverviewChartsUseZeroAndFullHeights(t *testing.T) {
+	now := time.Now().UTC()
+	today := time.Date(now.Year(), now.Month(), now.Day(), 12, 0, 0, 0, time.UTC)
+	overview := buildAdminOverview([]services.AdminBox{{
+		ID:        "box1",
+		CreatedAt: today,
+		TotalSize: 1024,
+	}}, services.AdminStats{TotalBoxes: 1, TotalFiles: 1, TotalSize: 1024})
+
+	for i, bar := range overview.UploadDays {
+		want := 0
+		if i == len(overview.UploadDays)-1 {
+			want = 100
+		}
+		if bar.Height != want {
+			t.Fatalf("upload bar %d height = %d, want %d", i, bar.Height, want)
+		}
+	}
+	for i, bar := range overview.StorageDays {
+		want := 0
+		if i == len(overview.StorageDays)-1 {
+			want = 100
+		}
+		if bar.Height != want {
+			t.Fatalf("storage bar %d height = %d, want %d", i, bar.Height, want)
+		}
+	}
+}
+
 func TestAdminStorageProviderPagesOnlyRenderRelevantFields(t *testing.T) {
 	app, cleanup := newTestApp(t)
 	defer cleanup()

backend/static/css/50-admin.css

@@ -197,7 +197,7 @@
 
 .bar-chart {
   display: flex;
-  align-items: flex-end;
+  align-items: stretch;
   gap: 0.4rem;
   height: 180px;
   margin-top: 1.25rem;
@@ -205,20 +205,27 @@
 }
 
 .bar-chart-col {
-  display: flex;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   flex: 1;
   min-width: 0;
-  flex-direction: column;
   align-items: center;
-  justify-content: flex-end;
   gap: 0.35rem;
   height: 100%;
 }
 
-.bar-chart-bar {
+.bar-chart-track {
   width: 100%;
   max-width: 2.2rem;
-  min-height: 2px;
+  min-height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.bar-chart-bar {
+  width: 100%;
+  min-height: 0;
   border-radius: 6px 6px 0 0;
   background: linear-gradient(180deg, var(--primary, #8b5cf6), color-mix(in srgb, var(--primary, #8b5cf6) 55%, transparent));
 }

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-bar" style="height: {{.Height}}%"></span>
+            <span class="bar-chart-track"><span class="bar-chart-bar" style="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-bar" style="height: {{.Height}}%"></span>
+          <span class="bar-chart-track"><span class="bar-chart-bar" style="height: {{.Height}}%"></span></span>
           <span class="bar-chart-label">{{.Label}}</span>
         </div>
         {{end}}