fix(ui): update dropdown font + bg color#372
Conversation
ConnysCode
left a comment
ConnysCode
left a comment
There was a problem hiding this comment.
Review: Approve — clean, well-reasoned fix. The CSS logic is sound, the hex values match the tokens they claim to mirror, and the test asserts the right thing. No blockers; two minor, non-blocking notes below for an optional follow-up.
Grounded against the real head (1fa994e):
- The three-way
[data-theme]partition is correct.data-themeon<html>is only everlight,dark, or absent — the pre-hydration bootstrap inapp/layout.tsx:54writes the palette todata-palette(lagoon/petrol/atelier) and only ever setsdata-themetolight/dark. So[data-theme='dark']→ dark hex,:not([data-theme='dark'])→ light hex (coverslight+ system-light), and theprefers-color-scheme: dark+:not([data-theme])media rule correctly overrides system-dark (same specificity, later in source → wins). All four appearance states resolve to a readable contrast pair. ✅ - The hex values do mirror the tokens.
--bg-surface-raised-top: light-dark(#FFFFFF, #303440)and--text-primary: light-dark(#1B1D24, #EEEFF3)in_lib/theme.css:49,58— exact match. ✅ - The test values are accurate.
PALETTES = ['lagoon','petrol','atelier']+THEMES = ['system','light','dark'](ThemeControls.tsx:22,25) → 2 selects, 6 options, in that order.renderWithIntlwraps inNextIntlClientProvider, souseTranslations()resolves. ✅
🟡 Scope — the fix is app-wide, not just the three named dropdowns
This is a global select option rule, so it now governs every <select> in the app (the admin pages, AgentPicker, SelfExtensionPanel, … — ~10 selects), not only the palette/appearance/locale ones from #360. That's the right outcome — readable Windows option popups everywhere — and I verified none of the other selects carried their own <option> color styling, so nothing gets silently overridden. Worth stating in the PR description so the broadened blast radius is intentional and documented rather than incidental.
PR description — factcheck
| Claim | Reality |
|---|---|
| "Hex values mirror --bg-surface-raised-top / --text-primary" | ✅ Exact match (theme.css:49,58). |
| "CSS + JSX class removal" | ✅ Only globals.css additions + className removal on <option>s + one new test. |
| "Risk: Low" | Agreed — with the note that it's now app-wide (see Scope above). No conflicting option styles found elsewhere. |
| "npm run lint && typecheck && test" | Not re-run by this review (web-ui deps not installed). The added test is statically correct; logic verified by inspection. |
Minimum to merge
Nothing required. The two notes below are optional polish.
Minor / nits (non-blocking)
- Test covers only
ThemeControls, notLocaleSwitcher. This PR removed the per-<option>classNamefromLocaleSwitcher.tsxtoo, but onlyThemeControlshas a regression guard. Consider extending coverage so the class can't silently creep back on the locale select. (inline) - Hex duplicates the tokens — acknowledged in the PR's
keep in synccomment, and genuinely unavoidable here: the Windows combobox widget ignoresvar(--…)on<option>, so the literal hex has to live in the rule. No action; flagging only that thekeep in synccomment is the right mitigation. (inline)
(Reviewed against head 1fa994e.)
Head branch was pushed to by a user without write access
ConnysCode
left a comment
ConnysCode
left a comment
There was a problem hiding this comment.
Review: Approve
Re-approving. My earlier approval was dismissed when the branch took new pushes. The PR's own scope is unchanged — still the 5-file Windows-dropdown fix — and the one open thread from my last pass is addressed.
The head moved twice while I reviewed (0e375fb → live 8fc91675); both new commits are just Merge branch 'main'. The PR-scope diff across them is empty — the 5 fix files are byte-identical. The only delta on the live head is main merged forward: #370 (plugin egress primitives) and #386 (Dependabot patch bumps — react 19.2.6→.7, vitest 4.1.8→.9, …). None of that is this PR's code.
Already changed since the last review
- LocaleSwitcher regression guard added (
LocaleSwitcher.test.tsx, commit6f3a1ca) — my one open note. Asserts 1 select,LOCALES-length options, correct values, no per-option class. Resolving that thread. - "This fix is app-wide." added to the description — the broadened blast radius (global
select optionrule) is now documented intent, as requested last round.
Verified (fix code identical on 0e375fb and live 8fc91675; ran in web-ui/)
vitest (ThemeControls + LocaleSwitcher) → 2/2 pass
eslint (changed files) → clean
tsc --noEmit (full project) → clean
(Run under the pre-bump toolchain; #386's bumps are patch-level main changes, not this fix.)
- Hex still mirrors the tokens (
theme.css:49,58):--bg-surface-raised-top: light-dark(#FFFFFF, #303440),--text-primary: light-dark(#1B1D24, #EEEFF3)— exact match to the fourselect optionrules (globals.css:671-684). - No conflicting option styling app-wide: grepped all 24
<select>in the current tree — none carry their own<option>color class/style, so the global rule overrides nothing silently (incl. main's newDashboardOnboarding/AgentPicker).
PR description — factcheck
| Claim | Reality |
|---|---|
| "Hex values mirror --bg-surface-raised-top / --text-primary" | ✅ Exact (theme.css:49,58). |
| "CSS + JSX class removal" | ✅ 5 files: globals.css rule + <option> className removal (Theme + Locale) + 2 regression tests. |
| "lint && typecheck && test" | ✅ Green on the fix code. |
| "This fix is app-wide" | ✅ Accurate, and now documented. |
One validation still outstanding (non-blocking)
The bug is a Windows-combobox quirk, and nothing here exercises it — jsdom and the macOS check only confirm the className is gone and the structure holds, not that the popup is readable on Windows. The Windows manual box is (honestly) still unchecked. Please have someone confirm palette / appearance / locale dropdowns on Windows Edge/Chrome in both themes before treating #360 as closed — the CSS reasoning is sound, but the real proof lives on a Windows device.
(Reviewed against head 8fc91675; fix content identical to the verified 0e375fb.)
2 participants
What
Fix unreadable native select dropdown options on Windows (#360).
Why
#360 Windows combobox widget ignores CSS vars on and doesn't inherit color-scheme into the popup — light-dark() resolved against dark page, painted near-white text on OS-light popup background. Moved option colors to [data-theme]-scoped global rules with hex values.
Test plan
Risk
Low. CSS + JSX class removal. Hex values mirror --bg-surface-raised-top / --text-primary; keep in sync.
This fix is app-wide.