From 4113515d0fc153b5d59eb4a0191e85e0c13d1c43 Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Thu, 2 Apr 2026 19:43:22 +0300
Subject: [PATCH] fix: keep usage chart axis labels readable

---
 apps/ui/css/usage.css   | 24 +++++++++++++++---------
 apps/ui/html/usage.html |  6 ++++--
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/ui/css/usage.css b/apps/ui/css/usage.css
index 97ff366..14fc42e 100644
--- a/apps/ui/css/usage.css
+++ b/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;
-  left: 50%;
-  bottom: 0;
-  transform: translateX(-50%);
-  width: max-content;
-  max-width: 100%;
+  flex: 0 0 auto;
+  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 {
diff --git a/apps/ui/html/usage.html b/apps/ui/html/usage.html
index c66134c..0d35d67 100644
--- a/apps/ui/html/usage.html
+++ b/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-bar error"></div>
-      <div class="chart-bar success"></div>
+      <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>