From c4de5f2ea0dac4b9e95c5741edee7571f47cfe27 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Sat, 29 Aug 2026 00:46:34 +0200
Subject: [PATCH] style(watchlist): a wider column, and the country stops
 truncating first
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

max-w-4xl left 'Central African R…' cut mid-name: the column grows to 5xl and
the country cell flexes with the row (capped at 14rem) instead of a hard 8rem.
---
 frontend/src/components/WatchlistTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/WatchlistTab.tsx b/frontend/src/components/WatchlistTab.tsx
index f17e16f..f660917 100644
--- a/frontend/src/components/WatchlistTab.tsx
+++ b/frontend/src/components/WatchlistTab.tsx
@@ -177,7 +177,7 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
   return (
     // Capped and centred: a card is a reading surface, and callsign-to-badge
     // lines stretched across a 34-inch window are not readable, they are long.
-    <div className="flex flex-col min-h-0 flex-1 gap-2 p-2 w-full max-w-4xl mx-auto">
+    <div className="flex flex-col min-h-0 flex-1 gap-2 p-2 w-full max-w-5xl mx-auto">
       {/* toolbar */}
       <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
         <Eye className="size-4 text-primary shrink-0" />
@@ -291,7 +291,7 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
                           !done && 'border-l-2 border-warning')}>
                         <span className={cn('font-bold shrink-0', done ? 'text-success' : 'text-warning')}>{done ? '✓' : '!'}</span>
                         <span className="font-mono font-bold text-info shrink-0">{s.dx_call}</span>
-                        <span className="text-muted-foreground truncate max-w-32">{(s as any).country ?? ''}</span>
+                        <span className="text-muted-foreground truncate flex-1 min-w-0 max-w-56">{(s as any).country ?? ''}</span>
                         <span className="px-1.5 rounded bg-muted shrink-0">{s.band}</span>
                         {mode && <span className="px-1.5 rounded shrink-0" style={{ color: 'var(--chart-5)', background: 'color-mix(in srgb, var(--chart-5) 12%, transparent)' }}>{mode}</span>}
                         <span className="font-mono text-muted-foreground shrink-0">{(s.freq_hz / 1e6).toFixed(4)}</span>