FN-7774: style the Thinking Level select to match the dark model dropdown
Adds dark-theme CSS styling for the inline Thinking Level <select> so it no longer renders as an OS-default white control across model-picker surfaces, including the quick-add QuickEntryBox and InlineCreateCard popups. - Add .thinking-level-select rule set in CustomModelDropdown.css mirroring the canonical dark select tokens (background, border, color, focus ring, disabled state, option/optgroup styling) - Add a custom dropdown chevron indicator via .model-combobox-thinking::after and make the container position: relative - Add a regression test asserting the select and option rules use the dark theme CSS tokens - Add a patch changeset for @runfusion/fusion documenting the fix Files changed: .changeset/fn-7774-thinking-level-select-styling.md | 7 +++ packages/dashboard/app/components/CustomModelDropdown.css | 59 ++++++++++++++++++++++ packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx | 16 ++++++ 3 files changed, 82 insertions(+) Fusion-Task-Id: FN-7774 Fusion-Task-Lineage: 9ef9bf07-dd18-499c-b04d-1b137d200689 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/fn-7774-thinking-level-select-styling.md
Normal file
7
.changeset/fn-7774-thinking-level-select-styling.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
summary: Style the Thinking Level dropdown to match the dark model picker across all surfaces.
|
||||||
|
category: fix
|
||||||
|
dev: Adds a `.thinking-level-select` rule in CustomModelDropdown.css mirroring the canonical dark `select` tokens; fixes the OS-default white control shown in model pickers incl. the quick-add QuickEntryBox/InlineCreateCard popups. No logic/prop changes.
|
||||||
@@ -132,6 +132,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.model-combobox-thinking {
|
.model-combobox-thinking {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--space-sm);
|
gap: var(--space-sm);
|
||||||
@@ -154,6 +155,64 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
FNXC:Settings-ThinkingLevel 2026-07-10-00:00:
|
||||||
|
The inline Thinking Level <select> had no CSS and rendered as the OS-default white control on the dark model dropdown across all model-picker surfaces, including the quick-add QuickEntryBox executor submenu and InlineCreateCard ModelSelectionModal. Mirror the canonical dark select tokens so reasoning-effort selection matches the surrounding combobox everywhere.
|
||||||
|
*/
|
||||||
|
.model-combobox .thinking-level-select {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-xs) calc(var(--space-lg) + var(--space-md)) var(--space-xs) var(--space-sm);
|
||||||
|
background: var(--surface);
|
||||||
|
border: var(--btn-border-width) solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--text);
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
line-height: 1.4;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
appearance: none;
|
||||||
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox .thinking-level-select:hover:not(:focus):not(:disabled) {
|
||||||
|
border-color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox .thinking-level-select:focus {
|
||||||
|
border-color: var(--todo);
|
||||||
|
box-shadow: var(--focus-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox .thinking-level-select:disabled {
|
||||||
|
opacity: var(--opacity-disabled, 0.6);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox .thinking-level-select option {
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
padding: var(--space-xs) var(--space-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox .thinking-level-select optgroup {
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-combobox-thinking::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: calc(var(--space-md) + var(--space-sm));
|
||||||
|
width: var(--space-xs);
|
||||||
|
height: var(--space-xs);
|
||||||
|
border: solid var(--text-muted);
|
||||||
|
border-width: 0 var(--btn-border-width) var(--btn-border-width) 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: rotate(45deg) translateY(calc(var(--space-xs) * -1));
|
||||||
|
}
|
||||||
|
|
||||||
.model-combobox-thinking-badge {
|
.model-combobox-thinking-badge {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-left: var(--space-sm);
|
margin-left: var(--space-sm);
|
||||||
|
|||||||
@@ -50,6 +50,22 @@ describe("CustomModelDropdown", () => {
|
|||||||
expect(css).not.toMatch(/(^|\n)\s*html\s*\*/);
|
expect(css).not.toMatch(/(^|\n)\s*html\s*\*/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps the Thinking Level select styled with dark theme tokens", () => {
|
||||||
|
const css = readFileSync(
|
||||||
|
resolve(__dirname, "../CustomModelDropdown.css"),
|
||||||
|
"utf-8",
|
||||||
|
);
|
||||||
|
const rule = css.match(/\.model-combobox\s+\.thinking-level-select\s*\{[^}]*\}/)?.[0] ?? "";
|
||||||
|
const optionRule = css.match(/\.model-combobox\s+\.thinking-level-select\s+option\s*\{[^}]*\}/)?.[0] ?? "";
|
||||||
|
|
||||||
|
expect(rule).toContain("background: var(--surface);");
|
||||||
|
expect(rule).toContain("border: var(--btn-border-width) solid var(--border);");
|
||||||
|
expect(rule).toContain("color: var(--text);");
|
||||||
|
expect(rule).toContain("appearance: none;");
|
||||||
|
expect(optionRule).toContain("background: var(--surface);");
|
||||||
|
expect(optionRule).toContain("color: var(--text);");
|
||||||
|
});
|
||||||
|
|
||||||
it("renders opt-in thinking control with default option and calls back for concrete and inherited values", async () => {
|
it("renders opt-in thinking control with default option and calls back for concrete and inherited values", async () => {
|
||||||
const user = userEvent.setup();
|
const user = userEvent.setup();
|
||||||
const onChange = vi.fn();
|
const onChange = vi.fn();
|
||||||
|
|||||||
Reference in New Issue
Block a user