From bb53085c21358cfcc972cd0006845f936b7babc0 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sat, 18 Jul 2026 03:52:14 +0200
Subject: [PATCH] fix: wider space for country names in statistics

---
 frontend/src/components/StatsPanel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/StatsPanel.tsx b/frontend/src/components/StatsPanel.tsx
index b8a31f9..9048e7a 100644
--- a/frontend/src/components/StatsPanel.tsx
+++ b/frontend/src/components/StatsPanel.tsx
@@ -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
 // 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 —
   // 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.
@@ -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">
       {top.map((d) => (
         <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="h-[10px] rounded-r-[4px] transition-[width] duration-300"
@@ -728,7 +728,7 @@ export function StatsPanel() {
           </Card>
 
           <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>
           <div className="flex flex-col gap-2.5 min-w-0">
             <Card title={t('stats.confirmations')} className="flex-1">