Track Record: Strategy/Lookback selects use the shared Dropdown

The portfolio-monitor filters were native <select> elements with a
hardcoded bg-slate-950 - a look from before the design system. They
now use the shared Dropdown (same as the Setups filters), which also
gives them the dark themed menu and the portal fix from 6464fdd.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/signals/BacktestPanel.tsx

@@ -5,6 +5,7 @@ import { triggerJob } from '../../api/admin';
 import { Button } from '../ui/Button';
 import { Callout } from '../ui/Callout';
 import { Disclosure } from '../ui/Disclosure';
+import { Dropdown } from '../ui/Dropdown';
 import { Section } from '../ui/Section';
 import { useToast } from '../ui/Toast';
 import type { BacktestCurvePoint, BacktestPortfolioMonitorRun } from '../../lib/types';
@@ -217,32 +218,29 @@ export function BacktestPanel() {
                     </p>
                   </div>
                   <div className="flex flex-wrap gap-2">
-                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
-                      Strategy
-                      <select
+                    <div className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      <label htmlFor="monitor-strategy">Strategy</label>
+                      <Dropdown
+                        id="monitor-strategy"
+                        className="w-64 normal-case tracking-normal"
                         value={activeStrategy}
-                        onChange={(e) => setSelectedStrategy(e.target.value)}
-                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
-                      >
-                        {monitor.strategies.map((s) => (
-                          <option key={s.strategy} value={s.strategy}>
-                            {s.is_production ? 'Production: ' : ''}{s.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                    <label className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
-                      Lookback
-                      <select
+                        onChange={setSelectedStrategy}
+                        options={monitor.strategies.map((s) => ({
+                          value: s.strategy,
+                          label: `${s.is_production ? 'Production: ' : ''}${s.label}`,
+                        }))}
+                      />
+                    </div>
+                    <div className="flex flex-col gap-1 text-[11px] uppercase tracking-wider text-gray-500">
+                      <label htmlFor="monitor-lookback">Lookback</label>
+                      <Dropdown
+                        id="monitor-lookback"
+                        className="w-36 normal-case tracking-normal"
                         value={activeLookback}
-                        onChange={(e) => setSelectedLookback(e.target.value)}
-                        className="rounded border border-white/10 bg-slate-950 px-3 py-2 text-xs normal-case tracking-normal text-gray-200"
-                      >
-                        {monitor.lookbacks.map((l) => (
-                          <option key={l.lookback} value={l.lookback}>{l.label}</option>
-                        ))}
-                      </select>
-                    </label>
+                        onChange={setSelectedLookback}
+                        options={monitor.lookbacks.map((l) => ({ value: l.lookback, label: l.label }))}
+                      />
+                    </div>
                   </div>
                 </div>