fix(FN-2568): keep custom model dropdown header and search wrapper opaque

- Set the combobox search wrapper background to var(--surface) to prevent option list bleed-through behind the input.
- Update the dropdown header background from var(--bg) to var(--surface) for a consistent opaque top section.
- Add a CSS regression test in CustomModelDropdown.test.tsx that asserts the search wrapper rule includes an opaque surface background.

packages/dashboard/app/components/CustomModelDropdown.css

@@ -78,6 +78,7 @@
 .model-combobox-search-wrapper {
   position: relative;
   flex-shrink: 0;
+  background: var(--surface);
   border-bottom: 1px solid var(--border);
 }
 
@@ -125,7 +126,7 @@
   padding: 6px 12px;
   font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
   color: var(--text-muted);
-  background: var(--bg);
+  background: var(--surface);
   border-bottom: 1px solid var(--border);
 }
 

packages/dashboard/app/components/__tests__/CustomModelDropdown.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { loadAllAppCss } from "../../test/cssFixture";
 import { CustomModelDropdown } from "../CustomModelDropdown";
 
 vi.mock("../ProviderIcon", () => ({
@@ -28,6 +29,13 @@ describe("CustomModelDropdown", () => {
     } as MediaQueryList));
   });
 
+  it("keeps the search wrapper background opaque to prevent list bleed-through", () => {
+    const css = loadAllAppCss();
+    const wrapperRuleMatch = css.match(/\.model-combobox-search-wrapper\s*\{[^}]*\}/);
+    expect(wrapperRuleMatch).toBeTruthy();
+    expect(wrapperRuleMatch![0]).toContain("background: var(--surface);");
+  });
+
   it("renders the open dropdown in a portal attached to document.body", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();