From e4ddaccd15c0a5a2616af0b5aca7e3c2a7756c20 Mon Sep 17 00:00:00 2001
From: Brad Harris <brad@studio.localdomain>
Date: Wed, 11 Mar 2026 10:01:40 -0600
Subject: [PATCH] Fix select dropdown hidden behind dialogs

The SelectContent z-index was z-50 but dialogs were raised to z-[70],
causing select dropdowns inside dialogs to render behind the overlay.
Bump SelectContent to z-[80] so it appears above dialogs.

Add E2E test verifying the agent type dropdown opens and allows
selection within the create agent dialog.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 e2e/create-agent-dropdown.spec.ts | 34 +++++++++++++++++++++++++++++++
 web/src/components/ui/select.tsx  |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 e2e/create-agent-dropdown.spec.ts

diff --git a/e2e/create-agent-dropdown.spec.ts b/e2e/create-agent-dropdown.spec.ts
new file mode 100644
index 00000000..a14632f0
--- /dev/null
+++ b/e2e/create-agent-dropdown.spec.ts
@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test";
+import { loadApp } from "./helpers";
+
+test.describe("Create agent dialog", () => {
+  test("agent type dropdown opens and allows selection", async ({ page }) => {
+    await loadApp(page);
+
+    // Open the create dialog
+    await page.getByTestId("create-agent-button").click();
+    const form = page.getByTestId("create-agent-form");
+    await expect(form).toBeVisible();
+
+    // The type select should default to "Codex"
+    const typeTrigger = form.getByRole("combobox").first();
+    await expect(typeTrigger).toContainText("Codex");
+
+    // Click to open the dropdown
+    await typeTrigger.click();
+
+    // The dropdown options should be visible
+    const claudeOption = page.getByRole("option", { name: "Claude" });
+    await expect(claudeOption).toBeVisible({ timeout: 3_000 });
+
+    // Select "Claude"
+    await claudeOption.click();
+
+    // The trigger should now show "Claude"
+    await expect(typeTrigger).toContainText("Claude");
+
+    // Close dialog
+    await page.getByTestId("create-agent-cancel").click();
+    await expect(form).not.toBeVisible({ timeout: 3_000 });
+  });
+});
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index d28b2542..39701d7a 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-card-foreground shadow-xl",
+        "relative z-[80] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-card-foreground shadow-xl",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",