jlengrand/Maestro
1
0
Fork 0
mirror of https://github.com/jlengrand/Maestro.git synced 2026-03-10 08:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve select dropdown z-index issue in group chat modals

Browse Source 
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.
This commit is contained in:
chr1syy
2026-02-05 15:46:50 +01:00
parent c260cc824e
commit 5616e6107b
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/components/EditGroupChatModal.tsx
View File

@@ -347,23 +347,22 @@ export function EditGroupChatModal({
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* Dropdown */} {/* Dropdown */}
<div className="relative flex-1"> <div className="relative flex-1" style={{ zIndex: 10000 }}>
<select <select
value={selectedAgent || ''} value={selectedAgent || ''}
onChange={(e) => handleAgentChange(e.target.value)} 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={{ style={{
backgroundColor: theme.colors.bgMain, backgroundColor: theme.colors.bgMain,
borderColor: theme.colors.border, borderColor: theme.colors.border,
color: theme.colors.textMain, color: theme.colors.textMain,
zIndex: 10000,
}} }}
aria-label="Select moderator agent" aria-label="Select moderator agent"
> >
{availableTiles.map((tile) => { {availableTiles.map((tile) => {
const isBeta = const isBeta =
tile.id === 'codex' || tile.id === 'codex' || tile.id === 'opencode' || tile.id === 'factory-droid';
tile.id === 'opencode' ||
tile.id === 'factory-droid';
return ( return (
<option key={tile.id} value={tile.id}> <option key={tile.id} value={tile.id}>
{tile.name} {tile.name}
@@ -374,7 +373,7 @@ export function EditGroupChatModal({
</select> </select>
<ChevronDown <ChevronDown
className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none" 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> </div>

7
src/renderer/components/NewGroupChatModal.tsx
View File

@@ -340,15 +340,16 @@ export function NewGroupChatModal({
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* Dropdown */} {/* Dropdown */}
<div className="relative flex-1"> <div className="relative flex-1" style={{ zIndex: 10000 }}>
<select <select
value={selectedAgent || ''} value={selectedAgent || ''}
onChange={(e) => handleAgentChange(e.target.value)} 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={{ style={{
backgroundColor: theme.colors.bgMain, backgroundColor: theme.colors.bgMain,
borderColor: theme.colors.border, borderColor: theme.colors.border,
color: theme.colors.textMain, color: theme.colors.textMain,
zIndex: 10000,
}} }}
aria-label="Select moderator agent" aria-label="Select moderator agent"
> >
@@ -365,7 +366,7 @@ export function NewGroupChatModal({
</select> </select>
<ChevronDown <ChevronDown
className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none" 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> </div>