From dd82a601be21a2a121e50ed7417974d9fadbee72 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Fri, 10 Jul 2026 09:54:39 -0700
Subject: [PATCH] FN-7789: fix thinking-level select styling in portaled model
 dropdowns

Rescopes the Thinking Level <select> dark-theme CSS to the createPortal dropdown container so it renders styled everywhere CustomModelDropdown is used, not just under the trigger wrapper.

- Change .thinking-level-select CSS selectors from .model-combobox to .model-combobox-dropdown scope (base, hover, focus, disabled, option, optgroup rules)
- Update test regexes/assertions to match the new .model-combobox-dropdown scope and assert the old .model-combobox scope no longer appears
- Add assertion that the thinking select renders inside .model-combobox-dropdown
- Add changeset (patch) documenting the fix

Files changed:
 .changeset/fn-7789-thinking-level-select-portal-scope.md  |  7 +++++++
 packages/dashboard/app/components/CustomModelDropdown.css | 15 +++++++++------
 .../app/components/__tests__/CustomModelDropdown.test.tsx |  6 ++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

Fusion-Task-Id: FN-7789

Fusion-Task-Lineage: 5c3addff-a672-42b1-94a9-11c0f235bb57

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
---
 .../fn-7789-thinking-level-select-portal-scope.md |  7 +++++++
 .../app/components/CustomModelDropdown.css        | 15 +++++++++------
 .../__tests__/CustomModelDropdown.test.tsx        |  6 ++++--
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/fn-7789-thinking-level-select-portal-scope.md

diff --git a/.changeset/fn-7789-thinking-level-select-portal-scope.md b/.changeset/fn-7789-thinking-level-select-portal-scope.md
new file mode 100644
index 0000000000..7f9f9acb4d
--- /dev/null
+++ b/.changeset/fn-7789-thinking-level-select-portal-scope.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Fix the Thinking Level dropdown showing an unstyled white control in model pickers.
+category: fix
+dev: Re-scopes .thinking-level-select from .model-combobox to the portaled .model-combobox-dropdown container.
diff --git a/packages/dashboard/app/components/CustomModelDropdown.css b/packages/dashboard/app/components/CustomModelDropdown.css
index b279bc5baa..975efd2c8d 100644
--- a/packages/dashboard/app/components/CustomModelDropdown.css
+++ b/packages/dashboard/app/components/CustomModelDropdown.css
@@ -158,8 +158,11 @@
 /*
 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.
+
+FNXC:Settings-ThinkingLevel 2026-07-10-00:00:
+The Thinking Level <select> renders inside the createPortal dropdown (.model-combobox-dropdown), not under the trigger wrapper (.model-combobox). Scope the select rules to the portal container so Android/mobile and desktop model pickers receive the dark-theme tokens wherever CustomModelDropdown is used.
 */
-.model-combobox .thinking-level-select {
+.model-combobox-dropdown .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);
@@ -175,27 +178,27 @@ The inline Thinking Level <select> had no CSS and rendered as the OS-default whi
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
 }
 
-.model-combobox .thinking-level-select:hover:not(:focus):not(:disabled) {
+.model-combobox-dropdown .thinking-level-select:hover:not(:focus):not(:disabled) {
   border-color: var(--text-dim);
 }
 
-.model-combobox .thinking-level-select:focus {
+.model-combobox-dropdown .thinking-level-select:focus {
   border-color: var(--todo);
   box-shadow: var(--focus-ring);
 }
 
-.model-combobox .thinking-level-select:disabled {
+.model-combobox-dropdown .thinking-level-select:disabled {
   opacity: var(--opacity-disabled, 0.6);
   cursor: not-allowed;
 }
 
-.model-combobox .thinking-level-select option {
+.model-combobox-dropdown .thinking-level-select option {
   background: var(--surface);
   color: var(--text);
   padding: var(--space-xs) var(--space-sm);
 }
 
-.model-combobox .thinking-level-select optgroup {
+.model-combobox-dropdown .thinking-level-select optgroup {
   background: var(--surface);
   color: var(--text-muted);
   font-weight: 600;
diff --git a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
index 16bcaa2933..218d3a6410 100644
--- a/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
+++ b/packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx
@@ -55,9 +55,10 @@ describe("CustomModelDropdown", () => {
       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] ?? "";
+    const rule = css.match(/\.model-combobox-dropdown\s+\.thinking-level-select\s*\{[^}]*\}/)?.[0] ?? "";
+    const optionRule = css.match(/\.model-combobox-dropdown\s+\.thinking-level-select\s+option\s*\{[^}]*\}/)?.[0] ?? "";
 
+    expect(css).not.toMatch(/\.model-combobox\s+\.thinking-level-select/);
     expect(rule).toContain("background: var(--surface);");
     expect(rule).toContain("border: var(--btn-border-width) solid var(--border);");
     expect(rule).toContain("color: var(--text);");
@@ -88,6 +89,7 @@ describe("CustomModelDropdown", () => {
 
     const thinkingSelect = await screen.findByTestId("custom-model-dropdown-thinking");
     expect(thinkingSelect).toHaveAccessibleName("Thinking Level");
+    expect(thinkingSelect.closest(".model-combobox-dropdown")).not.toBeNull();
     expect(within(thinkingSelect).getByRole("option", { name: "Default (off)" })).toBeTruthy();
     for (const optionName of ["Off", "Minimal", "Low", "Medium", "High", "Very High"]) {
       expect(within(thinkingSelect).getByRole("option", { name: optionName })).toBeTruthy();