From 054501874109ddb2c864e4fc65251bc25308c0e0 Mon Sep 17 00:00:00 2001
From: Shane Eilia <shane.eilia@bridgit.com.au>
Date: Tue, 25 Aug 2026 11:09:42 +1000
Subject: [PATCH] fix(web): stop composer slash menu covering dialogs and
 palettes

The composer command drawer portals to document.body at z-70, while
dialog, alert-dialog, command-palette, and sheet overlays sat at z-50.
Opening any of them while the slash menu was up (for example New thread
or Add project in the sidebar) rendered the modal underneath the menu.

Raise the modal overlay layer to z-80: above the composer drawer (70),
below toasts (100) and popups (130), so no other layering changes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/ui/alert-dialog.tsx | 2 +-
 apps/web/src/components/ui/command.tsx      | 2 +-
 apps/web/src/components/ui/dialog-styles.ts | 2 +-
 apps/web/src/components/ui/dialog.tsx       | 2 +-
 apps/web/src/components/ui/sheet.tsx        | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 4f57e920118b..6ea6b5af1b32 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ function AlertDialogViewport({ className, ...props }: AlertDialogPrimitive.Viewp
   return (
     <AlertDialogPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",
+        "fixed inset-0 z-[80] grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",
         className,
       )}
       data-slot="alert-dialog-viewport"
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index c1952e9c6f36..a7517b3ba903 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -42,7 +42,7 @@ function CommandDialogViewport({ className, ...props }: CommandDialogPrimitive.V
   return (
     <CommandDialogPrimitive.Viewport
       className={cn(
-        "pointer-events-none fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
+        "pointer-events-none fixed inset-0 z-[80] flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
         className,
       )}
       data-slot="command-dialog-viewport"
diff --git a/apps/web/src/components/ui/dialog-styles.ts b/apps/web/src/components/ui/dialog-styles.ts
index 15e9e8880742..babea4e7d46a 100644
--- a/apps/web/src/components/ui/dialog-styles.ts
+++ b/apps/web/src/components/ui/dialog-styles.ts
@@ -1,5 +1,5 @@
 const DIALOG_BACKDROP_CLASS =
-  "dialog-backdrop fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0";
+  "dialog-backdrop fixed inset-0 z-[80] transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0";
 
 const DIALOG_POPUP_CLASS =
   "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative flex min-h-0 w-full min-w-0 scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0";
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index a96f648803aa..931f1372fcbf 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -40,7 +40,7 @@ function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props)
   return (
     <DialogPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",
+        "fixed inset-0 z-[80] grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",
         className,
       )}
       data-slot="dialog-viewport"
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index 9d0436b661da..410bce8eb3ad 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -22,7 +22,7 @@ function SheetBackdrop({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
     <SheetPrimitive.Backdrop
       className={cn(
-        "fixed inset-0 z-50 bg-background/60 backdrop-blur-xs transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        "fixed inset-0 z-[80] bg-background/60 backdrop-blur-xs transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
         className,
       )}
       data-slot="sheet-backdrop"
@@ -43,7 +43,7 @@ function SheetViewport({
   return (
     <SheetPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 grid",
+        "fixed inset-0 z-[80] grid",
         side === "bottom" && "grid grid-rows-[1fr_auto] pt-12",
         side === "top" && "grid grid-rows-[auto_1fr] pb-12",
         side === "left" && "flex justify-start",