bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep usage chart labels visible

Browse Source
This commit is contained in:
a.tolmachev
2026-04-02 00:19:03 +03:00
parent 3a7348f685
commit 1871b5e9ee
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/css/usage.css
+12 -8
View File
@@ -24,13 +24,12 @@
background: var(--bg-canvas); background: var(--bg-canvas);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
height: 200px; height: 224px;
display: flex; display: flex;
align-items: flex-end; align-items: stretch;
padding: 12px 16px; padding: 12px 16px;
gap: 4px; gap: 4px;
overflow: hidden; overflow: hidden;
margin-bottom: 24px;
position: relative; position: relative;
} }
@@ -44,6 +43,7 @@
justify-content: flex-end; justify-content: flex-end;
gap: 2px; gap: 2px;
position: relative; position: relative;
padding-bottom: 24px;
} }
.chart-bar { .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.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-bar.error { background: linear-gradient(180deg, var(--red) 0%, rgba(248,81,73,0.3) 100%); }
.chart-label { .chart-col-label {
position: absolute; position: absolute;
bottom: -20px; left: 50%;
left: 0; bottom: 0;
right: 0; transform: translateX(-50%);
width: max-content;
max-width: 100%;
text-align: center; text-align: center;
font-size: 10px; font-size: 10.5px;
line-height: 1;
color: var(--text-muted); color: var(--text-muted);
white-space: nowrap;
} }
.chart-wrap { .chart-wrap {
apps/ui/html/usage.html
+4 -4
View File
@@ -191,10 +191,10 @@
<!-- Template: chart bar column --> <!-- Template: chart bar column -->
<template id="tmpl-chart-bar"> <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-col">
<div class="chart-bar error" style="width:100%;"></div> <div class="chart-bar error"></div>
<div class="chart-bar success" style="width:100%;"></div> <div class="chart-bar success"></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-label"></div>
</div> </div>
</template> </template>