From ebdd5bdf2754d8903f0b08c03c92a9d953eddd73 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 9 Dec 2025 12:22:35 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20fix:=20correct=20z-index=20layer?=
 =?UTF-8?q?ing=20for=20dialogs=20and=20UI=20elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dialog overlay and content: z-50 → z-[1500] (above toasts)
- ModelSelector: z-[1000] → z-[1020] (above command suggestions)

Z-index hierarchy:
- z-[1000]: ChatInputToast
- z-[1010]: CommandSuggestions
- z-[1020]: ModelSelector
- z-[1500]: Dialog
- z-[2000]: CommandPalette
- z-[9999]: TutorialTooltip
- z-[10000]: KebabMenu, PopoverError

Fixes toast appearing over the Secrets modal dialog.
---
 src/browser/components/ModelSelector.tsx | 2 +-
 src/browser/components/ui/dialog.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/ModelSelector.tsx b/src/browser/components/ModelSelector.tsx
index a5799e6f97..9515e8c25e 100644
--- a/src/browser/components/ModelSelector.tsx
+++ b/src/browser/components/ModelSelector.tsx
@@ -243,7 +243,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
           )}
         </div>
         {showDropdown && (
-          <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1000] mb-1 max-h-[200px] min-w-80 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
+          <div className="bg-separator border-border-light absolute bottom-full left-0 z-[1020] mb-1 max-h-[200px] min-w-80 overflow-y-auto rounded border shadow-[0_4px_12px_rgba(0,0,0,0.3)]">
             {filteredModels.length === 0 ? (
               <div className="text-muted-light font-monospace px-2.5 py-1.5 text-[11px]">
                 No matching models
diff --git a/src/browser/components/ui/dialog.tsx b/src/browser/components/ui/dialog.tsx
index ae292463e9..04bb23e2a2 100644
--- a/src/browser/components/ui/dialog.tsx
+++ b/src/browser/components/ui/dialog.tsx
@@ -26,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[1500] bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "bg-dark border-border fixed top-[50%] left-[50%] z-50 grid w-[90%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "bg-dark border-border fixed top-[50%] left-[50%] z-[1500] grid w-[90%] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         !maxWidth && "max-w-lg",
         maxHeight && "overflow-y-auto",
         className