fix: resolve modal dropdown z-index conflicts across application
Restructure 7 modal components to use 3-layer architecture preventing native select dropdown menus from being blocked by modal overlays. Components fixed: - ProxyHostForm: ACL selector and Security Headers dropdowns - User management: Role and permission mode selection - Uptime monitors: Monitor type selection (HTTP/TCP) - Remote servers: Provider selection dropdown - CrowdSec: IP ban duration selection The fix separates modal background overlay (z-40) from form container (z-50) and enables pointer events only on form content, allowing native dropdown menus to render above all modal layers. Resolves user inability to select security policies, user roles, monitor types, and other critical configuration options through the UI interface.
This commit is contained in:
@@ -511,8 +511,15 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-dark-card rounded-lg border border-gray-800 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<>
|
||||
{/* Layer 1: Background overlay (z-40) */}
|
||||
<div className="fixed inset-0 bg-black/50 z-40" onClick={onCancel} />
|
||||
|
||||
{/* Layer 2: Form container (z-50, pointer-events-none) */}
|
||||
<div className="fixed inset-0 flex items-center justify-center p-4 pointer-events-none z-50">
|
||||
|
||||
{/* Layer 3: Form content (pointer-events-auto) */}
|
||||
<div className="bg-dark-card rounded-lg border border-gray-800 max-w-2xl w-full max-h-[90vh] overflow-y-auto pointer-events-auto">
|
||||
<div className="p-6 border-b border-gray-800">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
{host ? 'Edit Proxy Host' : 'Add Proxy Host'}
|
||||
@@ -1360,6 +1367,8 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user