style(watchlist): a wider column, and the country stops truncating first

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

@@ -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>