fix: keep usage chart labels visible

apps/ui/css/usage.css

@@ -24,13 +24,12 @@
   background: var(--bg-canvas);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  height: 200px;
+  height: 224px;
   display: flex;
-  align-items: flex-end;
+  align-items: stretch;
   padding: 12px 16px;
   gap: 4px;
   overflow: hidden;
-  margin-bottom: 24px;
   position: relative;
 }
 
@@ -44,6 +43,7 @@
   justify-content: flex-end;
   gap: 2px;
   position: relative;
+  padding-bottom: 24px;
 }
 
 .chart-bar {
@@ -77,14 +77,18 @@
 .chart-bar.success { background: linear-gradient(180deg, var(--accent) 0%, rgba(13,148,136,0.4) 100%); }
 .chart-bar.error   { background: linear-gradient(180deg, var(--red)    0%, rgba(248,81,73,0.3)   100%); }
 
-.chart-label {
+.chart-col-label {
   position: absolute;
-  bottom: -20px;
-  left: 0;
-  right: 0;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: max-content;
+  max-width: 100%;
   text-align: center;
-  font-size: 10px;
+  font-size: 10.5px;
+  line-height: 1;
   color: var(--text-muted);
+  white-space: nowrap;
 }
 
 .chart-wrap {

apps/ui/html/usage.html

@@ -191,10 +191,10 @@
 
   <!-- Template: chart bar column -->
   <template id="tmpl-chart-bar">
-    <div class="chart-col" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:flex-end;position:relative;">
-      <div class="chart-bar error" style="width:100%;"></div>
-      <div class="chart-bar success" style="width:100%;"></div>
-      <div class="chart-col-label" style="position:absolute;bottom:-22px;font-size:10.5px;color:var(--text-muted);text-align:center;width:100%;"></div>
+    <div class="chart-col">
+      <div class="chart-bar error"></div>
+      <div class="chart-bar success"></div>
+      <div class="chart-col-label"></div>
     </div>
   </template>