From 5616e6107ba76cf287c7bbe5b9ce304bdf3d8d35 Mon Sep 17 00:00:00 2001
From: chr1syy <ch.bleuel@me.com>
Date: Thu, 5 Feb 2026 15:46:50 +0100
Subject: [PATCH] fix: resolve select dropdown z-index issue in group chat
 modals

The native HTML select element's dropdown menu was being rendered behind
the modal overlay, making it impossible to interact with the options. This
was caused by a z-index stacking context issue where the modal's overlay
had a higher z-index than the select element.

Fixed by explicitly setting zIndex: 10000 on the select container and
select element, and zIndex: 10001 on the icon, ensuring the dropdown
renders above the modal overlay (z-index: 9999).

Fixes the issue in both NewGroupChatModal and EditGroupChatModal.
---
 src/renderer/components/EditGroupChatModal.tsx | 11 +++++------
 src/renderer/components/NewGroupChatModal.tsx  |  7 ++++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/EditGroupChatModal.tsx b/src/renderer/components/EditGroupChatModal.tsx
index d375cf93..13120e15 100644
--- a/src/renderer/components/EditGroupChatModal.tsx
+++ b/src/renderer/components/EditGroupChatModal.tsx
@@ -347,23 +347,22 @@ export function EditGroupChatModal({
 					) : (
 						<div className="flex items-center gap-2">
 							{/* Dropdown */}
-							<div className="relative flex-1">
+							<div className="relative flex-1" style={{ zIndex: 10000 }}>
 								<select
 									value={selectedAgent || ''}
 									onChange={(e) => handleAgentChange(e.target.value)}
-									className="w-full px-3 py-2 pr-10 rounded-lg border outline-none appearance-none cursor-pointer text-sm"
+									className="w-full px-3 py-2 pr-10 rounded-lg border outline-none appearance-none cursor-pointer text-sm relative"
 									style={{
 										backgroundColor: theme.colors.bgMain,
 										borderColor: theme.colors.border,
 										color: theme.colors.textMain,
+										zIndex: 10000,
 									}}
 									aria-label="Select moderator agent"
 								>
 									{availableTiles.map((tile) => {
 										const isBeta =
-											tile.id === 'codex' ||
-											tile.id === 'opencode' ||
-											tile.id === 'factory-droid';
+											tile.id === 'codex' || tile.id === 'opencode' || tile.id === 'factory-droid';
 										return (
 											<option key={tile.id} value={tile.id}>
 												{tile.name}
@@ -374,7 +373,7 @@ export function EditGroupChatModal({
 								</select>
 								<ChevronDown
 									className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none"
-									style={{ color: theme.colors.textDim }}
+									style={{ color: theme.colors.textDim, zIndex: 10001 }}
 								/>
 							</div>
 
diff --git a/src/renderer/components/NewGroupChatModal.tsx b/src/renderer/components/NewGroupChatModal.tsx
index 458f357d..8d25541d 100644
--- a/src/renderer/components/NewGroupChatModal.tsx
+++ b/src/renderer/components/NewGroupChatModal.tsx
@@ -340,15 +340,16 @@ export function NewGroupChatModal({
 					) : (
 						<div className="flex items-center gap-2">
 							{/* Dropdown */}
-							<div className="relative flex-1">
+							<div className="relative flex-1" style={{ zIndex: 10000 }}>
 								<select
 									value={selectedAgent || ''}
 									onChange={(e) => handleAgentChange(e.target.value)}
-									className="w-full px-3 py-2 pr-10 rounded-lg border outline-none appearance-none cursor-pointer text-sm"
+									className="w-full px-3 py-2 pr-10 rounded-lg border outline-none appearance-none cursor-pointer text-sm relative"
 									style={{
 										backgroundColor: theme.colors.bgMain,
 										borderColor: theme.colors.border,
 										color: theme.colors.textMain,
+										zIndex: 10000,
 									}}
 									aria-label="Select moderator agent"
 								>
@@ -365,7 +366,7 @@ export function NewGroupChatModal({
 								</select>
 								<ChevronDown
 									className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none"
-									style={{ color: theme.colors.textDim }}
+									style={{ color: theme.colors.textDim, zIndex: 10001 }}
 								/>
 							</div>