fix: wider space for country names in statistics

This commit is contained in:
2026-07-18 03:52:14 +02:00
parent 031dfa8f46
commit bb53085c21
+3 -3
View File
@@ -80,7 +80,7 @@ function StatTile({ label, value, sub }: { label: string; value: string; sub?: s
// One series → one hue. The value is direct-labelled, so no reader ever depends // One series → one hue. The value is direct-labelled, so no reader ever depends
// on a tooltip to get a number. // on a tooltip to get a number.
function HBars({ data, max, empty, share }: { data: Bucket[]; max?: number; empty: string; share?: boolean }) { function HBars({ data, max, empty, share, labelWidth = 'w-20' }: { data: Bucket[]; max?: number; empty: string; share?: boolean; labelWidth?: string }) {
// max is a display cap for long tails (top entities). Where EVERY row matters — // max is a display cap for long tails (top entities). Where EVERY row matters —
// the operators of a multi-op — it is deliberately not set: a capped chart would // the operators of a multi-op — it is deliberately not set: a capped chart would
// silently drop the 9th operator, and "who worked what" is the whole question. // silently drop the 9th operator, and "who worked what" is the whole question.
@@ -92,7 +92,7 @@ function HBars({ data, max, empty, share }: { data: Bucket[]; max?: number; empt
<div className="flex flex-col gap-1.5 min-w-0"> <div className="flex flex-col gap-1.5 min-w-0">
{top.map((d) => ( {top.map((d) => (
<div key={d.key} className="group flex items-center gap-2 min-w-0" title={`${d.key}${nf(d.count)}`}> <div key={d.key} className="group flex items-center gap-2 min-w-0" title={`${d.key}${nf(d.count)}`}>
<span className="w-20 shrink-0 truncate text-[11px] text-muted-foreground text-right">{d.key}</span> <span className={`${labelWidth} shrink-0 truncate text-[11px] text-muted-foreground text-right`} title={d.key}>{d.key}</span>
<div className="flex-1 min-w-0 h-[14px] flex items-center"> <div className="flex-1 min-w-0 h-[14px] flex items-center">
<div <div
className="h-[10px] rounded-r-[4px] transition-[width] duration-300" className="h-[10px] rounded-r-[4px] transition-[width] duration-300"
@@ -728,7 +728,7 @@ export function StatsPanel() {
</Card> </Card>
<Card title={t('stats.topEntities')}> <Card title={t('stats.topEntities')}>
<HBars data={stats.top_entities} max={12} empty={empty} /> <HBars data={stats.top_entities} max={12} empty={empty} labelWidth="w-40" />
</Card> </Card>
<div className="flex flex-col gap-2.5 min-w-0"> <div className="flex flex-col gap-2.5 min-w-0">
<Card title={t('stats.confirmations')} className="flex-1"> <Card title={t('stats.confirmations')} className="flex-1">