diff --git a/apps/ui/css/usage.css b/apps/ui/css/usage.css index 356b0f4..97ff366 100644 --- a/apps/ui/css/usage.css +++ b/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 { diff --git a/apps/ui/html/usage.html b/apps/ui/html/usage.html index 6dcf31e..c66134c 100644 --- a/apps/ui/html/usage.html +++ b/apps/ui/html/usage.html @@ -191,10 +191,10 @@