style(watchlist): the toolbar is two atomic groups — no more orphan chip

Add-controls left, filters right, justify-between: when the pane narrows, the
whole filter group drops below as a block instead of shedding its last chip.
Shorter chip labels (Active / Needed) and a slimmer search keep both groups on
one line at the tab's normal width.

frontend/src/components/WatchlistTab.tsx

@@ -236,8 +236,9 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
         </span>
       </div>
       {/* toolbar */}
-      <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
-        <Input className="h-8 w-44 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.addPh')} value={addCall}
+      <div className="flex items-start justify-between gap-x-3 gap-y-1.5 flex-wrap">
+        <div className="flex items-center gap-2 shrink-0">
+        <Input className="h-8 w-40 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.addPh')} value={addCall}
           onChange={(e) => setAddCall(e.target.value.toUpperCase())}
           onKeyDown={(e) => { if (e.key === 'Enter') void add(); }} />
         <label className="flex items-center gap-1.5 text-xs cursor-pointer" title={t('wl.contestHint')}>
@@ -252,10 +253,11 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
           value={pattern}
           onChange={(e) => setPattern(e.target.value.toUpperCase())}
           onBlur={() => { void SetWatchlistContestPattern(pattern.trim()); }} />
-        <div className="flex-1" />
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
         <div className="relative">
           <Search className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
-          <Input className="h-8 w-32 pl-7 text-sm" placeholder={t('wl.searchPh')} value={search}
+          <Input className="h-8 w-28 pl-7 text-sm" placeholder={t('wl.searchPh')} value={search}
             onChange={(e) => setSearch(e.target.value)} />
         </div>
         {/* families kept together, told apart — per review of the DXHunter port,
@@ -284,6 +286,7 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
           className={cn('px-2 py-1 rounded-md border text-xs', neededOnly ? 'bg-accent border-border font-medium' : 'border-border text-muted-foreground hover:bg-accent/50')}>
           {t('wl.neededOnly')}
         </button>
+        </div>
       </div>
       {error && <div className="text-xs text-danger px-1">{error}</div>}