refactor(admin): use inline pixel heights for overview charts

Refactors the admin overview dashboard charts to use inline pixel heights (up to 150px) instead of CSS variables and percentage-based heights. This provides more robust rendering and layout control.

Changes include:
- Replacing `Height` with `HeightPx` in chart bar structures.
- Rendering inline styles for height and width on charts and status bars.
- Adding fallback data attributes (`data-height-px`, `data-chart-value`, etc.) and loading a new fallback script (`25-admin-charts.js`).
- Updating and expanding test coverage to assert correct scaling and HTML rendering.

backend/static/css/50-admin.css

@@ -198,9 +198,9 @@
 .bar-chart {
   display: grid;
   grid-template-columns: repeat(14, minmax(0, 1fr));
-  align-items: stretch;
+  align-items: end;
   gap: 0.4rem;
-  min-height: 15rem;
+  min-height: 13rem;
   margin-top: 1.25rem;
   padding-top: 0.5rem;
 }
@@ -214,11 +214,13 @@
 }
 
 .bar-chart-track {
-  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
   flex: 1 1 auto;
   width: 100%;
   max-width: 1.8rem;
-  min-height: 9rem;
+  height: 150px;
   margin: 0 auto;
   border-bottom: 2px solid color-mix(in srgb, var(--primary, #8b5cf6) 75%, transparent);
   border-radius: 0.45rem 0.45rem 0 0;
@@ -228,12 +230,8 @@
 
 .bar-chart-bar {
   display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
   width: 100%;
-  height: var(--bar-height, 0%);
+  min-height: 0;
   border-radius: 6px 6px 0 0;
   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);
@@ -278,6 +276,8 @@
 }
 
 .stat-bar-track {
+  display: block;
+  width: 100%;
   margin-top: 0.35rem;
   height: 0.55rem;
   border-radius: 999px;
@@ -288,6 +288,7 @@
 .stat-bar-fill {
   display: block;
   height: 100%;
+  min-width: 0;
   border-radius: 999px;
   background: var(--primary, #8b5cf6);
 }

backend/static/js/25-admin-charts.js

@@ -0,0 +1,57 @@
+(function () {
+  const maxBarHeight = 150;
+
+  function numberAttr(element, name) {
+    const value = Number(element.getAttribute(name));
+    return Number.isFinite(value) ? value : 0;
+  }
+
+  function applyChartBars() {
+    document.querySelectorAll(".bar-chart").forEach((chart) => {
+      const bars = Array.from(chart.querySelectorAll(".bar-chart-col"));
+      const maxValue = Math.max(0, ...bars.map((bar) => numberAttr(bar, "data-chart-value")));
+
+      bars.forEach((bar) => {
+        const fill = bar.querySelector(".bar-chart-bar");
+        if (!fill) {
+          return;
+        }
+        const value = numberAttr(bar, "data-chart-value");
+        let height = numberAttr(fill, "data-height-px");
+        if (maxValue > 0) {
+          height = value <= 0 ? 0 : Math.max(8, Math.round((value / maxValue) * maxBarHeight));
+        }
+        fill.style.height = `${Math.min(maxBarHeight, height)}px`;
+      });
+    });
+  }
+
+  function applyStatusBars() {
+    const rows = Array.from(document.querySelectorAll(".stat-bar"));
+    const maxValue = Math.max(0, ...rows.map((row) => numberAttr(row, "data-stat-value")));
+
+    rows.forEach((row) => {
+      const fill = row.querySelector(".stat-bar-fill");
+      if (!fill) {
+        return;
+      }
+      const value = numberAttr(row, "data-stat-value");
+      let width = numberAttr(fill, "data-width-percent");
+      if (maxValue > 0) {
+        width = value <= 0 ? 0 : Math.round((value / maxValue) * 100);
+      }
+      fill.style.width = `${Math.max(0, Math.min(100, width))}%`;
+    });
+  }
+
+  function init() {
+    applyChartBars();
+    applyStatusBars();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();