From 924c474624676b6be15284bbd3744c5a7c0652f6 Mon Sep 17 00:00:00 2001
From: Dennis Thiessen <dennis@thiessen.io>
Date: Fri, 10 Jul 2026 23:23:09 +0200
Subject: [PATCH] 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>
---
 .../src/components/signals/BacktestPanel.tsx  | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/signals/BacktestPanel.tsx b/frontend/src/components/signals/BacktestPanel.tsx
index 543d41a..b38bff5 100644
--- a/frontend/src/components/signals/BacktestPanel.tsx
+++ b/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>