maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(admin): Widen usage labels to prevent text truncation in AI dashboard
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
- Increase usage-label width from 120px to 180px for full model/type names
- Remove [:20] truncation on model names in templates
- Add word-break on ranking table cells and usage labels

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-02-07 16:59:14 +01:00
parent 61ba3f84d6
commit 70ca3c4878
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
templates/admin/ai_usage_company.html
View File

@ -145,9 +145,11 @@
}
.usage-label {
width: 140px;
width: 180px;
min-width: 180px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
word-break: break-word;
}
.usage-bar-container {
@ -344,7 +346,7 @@
@media (max-width: 768px) {
.company-card { flex-direction: column; text-align: center; }
.sections-grid { grid-template-columns: 1fr; }
.usage-label { width: 100px; }
.usage-label { width: 120px; min-width: 120px; }
.logs-table { font-size: var(--font-size-sm); }
}
</style>
@ -473,7 +475,7 @@
<div class="usage-breakdown">
{% for item in model_breakdown %}
<div class="usage-row">
<div class="usage-label" title="{{ item.model }}">{{ item.model[:20] }}</div>
<div class="usage-label">{{ item.model }}</div>
<div class="usage-bar-container">
<div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%">
{{ item.percentage }}%

9
templates/admin/ai_usage_dashboard.html
View File

@ -245,9 +245,11 @@
}
.usage-label {
width: 120px;
width: 180px;
min-width: 180px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
word-break: break-word;
}
.usage-bar-container {
@ -307,6 +309,7 @@
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--border);
word-break: break-word;
}
.ranking-table th {
@ -482,7 +485,7 @@
@media (max-width: 768px) {
.sections-grid { grid-template-columns: 1fr; }
.usage-label { width: 80px; }
.usage-label { width: 120px; min-width: 120px; }
.ranking-table { font-size: var(--font-size-sm); }
.filters-bar { flex-direction: column; align-items: stretch; }
.filter-group select,
@ -781,7 +784,7 @@
<div class="usage-breakdown">
{% for item in model_breakdown %}
<div class="usage-row">
<div class="usage-label" title="{{ item.model }}">{{ item.model[:20] }}</div>
<div class="usage-label">{{ item.model }}</div>
<div class="usage-bar-container">
<div class="usage-bar model-{{ loop.index }}" style="width: {{ item.percentage }}%">
{{ item.percentage }}%