fix: keep usage chart axis labels readable

apps/ui/css/usage.css

@@ -24,7 +24,7 @@
   background: var(--bg-canvas);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  height: 224px;
+  height: 248px;
   display: flex;
   align-items: stretch;
   padding: 12px 16px;
@@ -41,9 +41,17 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
+  gap: 10px;
+}
+
+.chart-col-bars {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
   gap: 2px;
-  position: relative;
-  padding-bottom: 24px;
 }
 
 .chart-bar {
@@ -78,17 +86,15 @@
 .chart-bar.error   { background: linear-gradient(180deg, var(--red)    0%, rgba(248,81,73,0.3)   100%); }
 
 .chart-col-label {
-  position: absolute;
+  flex: 0 0 auto;
-  left: 50%;
+  width: 100%;
-  bottom: 0;
-  transform: translateX(-50%);
-  width: max-content;
-  max-width: 100%;
   text-align: center;
   font-size: 10.5px;
   line-height: 1;
   color: var(--text-muted);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .chart-wrap {

apps/ui/html/usage.html

@@ -192,8 +192,10 @@
   <!-- Template: chart bar column -->
   <template id="tmpl-chart-bar">
     <div class="chart-col">
+      <div class="chart-col-bars">
         <div class="chart-bar error"></div>
         <div class="chart-bar success"></div>
+      </div>
       <div class="chart-col-label"></div>
     </div>
   </template>