Skip to content

Commit 719e7be

Browse files
cliffhallclaude
andcommitted
Fix dropdown styling — Select and Autocomplete need separate selectors
The previous commit re-scoped the dark-mode dropdown rules from `.mantine-Select-*` to `.mantine-Combobox-*` on the assumption that both Select and Autocomplete share a Combobox class on the dropdown root. They don't — Mantine's Combobox factory takes `__staticSelector` from the parent component, so Select emits `mantine-Select-dropdown` and Autocomplete emits `mantine-Autocomplete-dropdown` with no shared `Combobox` class on that element. The `.mantine-Combobox-*` selector matched nothing, so the TaskControls filter (and every other Select) lost its gray surface and reverted to Mantine's default brown-ish dark background. List both selectors so Select dropdowns keep their styling and Autocomplete dropdowns pick it up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 1561b46 commit 719e7be

1 file changed

Lines changed: 12 additions & 10 deletions

File tree

clients/web/src/App.css

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,20 +110,22 @@
110110
background-color: var(--mantine-primary-color-light);
111111
}
112112

113-
/* ── Combobox dropdown / option (dark mode) ──────────────────────
113+
/* ── Select / Autocomplete dropdown / option (dark mode) ─────────
114114
*
115-
* Targets `.mantine-Combobox-*` so the same dark-mode dropdown
116-
* background + hover apply to every Combobox-built input (Select,
117-
* Autocomplete, MultiSelect, TagsInput, …). Earlier this scoped to
118-
* `.mantine-Select-*` only and the argument-completion Autocompletes
119-
* shipped an unstyled dropdown that looked nothing like the rest of
120-
* the app's filter dropdowns. */
121-
122-
[data-mantine-color-scheme="dark"] .mantine-Combobox-dropdown {
115+
* Select and Autocomplete each render with their own static selector
116+
* (`mantine-Select-*` / `mantine-Autocomplete-*`) — they share the
117+
* Combobox primitive but don't emit a shared `mantine-Combobox-*`
118+
* class on the dropdown root. List both so the argument-completion
119+
* Autocompletes get the same gray surface + primary-light hover as
120+
* the filter dropdowns. */
121+
122+
[data-mantine-color-scheme="dark"] .mantine-Select-dropdown,
123+
[data-mantine-color-scheme="dark"] .mantine-Autocomplete-dropdown {
123124
background-color: var(--mantine-color-gray-8);
124125
}
125126

126-
[data-mantine-color-scheme="dark"] .mantine-Combobox-option:hover {
127+
[data-mantine-color-scheme="dark"] .mantine-Select-option:hover,
128+
[data-mantine-color-scheme="dark"] .mantine-Autocomplete-option:hover {
127129
background-color: var(--mantine-primary-color-light);
128130
}
129131

0 commit comments

Comments
 (0)