From 3d7872bdcf498754e398616fb7473abda3ab4d00 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Mon, 2 Mar 2026 15:01:08 +0800
Subject: [PATCH] refactor(web): simplify z-index to rely on isolation + DOM
 order

Remove z-index tokens from tailwind config. With root `isolation: isolate`,
portaled overlays naturally sit above app content via DOM order.

- Tooltip / Popover / Dropdown: no z-index needed
- Dialog: z-50 (modal must cover non-modal portals)
- Toast: z-[99] (always on top, defined in toast component)
---
 web/app/components/base/ui/dialog/index.tsx        | 9 +++++++--
 web/app/components/base/ui/dropdown-menu/index.tsx | 4 ++--
 web/app/components/base/ui/popover/index.tsx       | 2 +-
 web/app/components/base/ui/tooltip/index.tsx       | 2 +-
 web/tailwind-common-config.ts                      | 7 -------
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/web/app/components/base/ui/dialog/index.tsx b/web/app/components/base/ui/dialog/index.tsx
index 07d1e1f649..61b9309138 100644
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/web/app/components/base/ui/dialog/index.tsx
@@ -1,5 +1,10 @@
 'use client'
 
+// z-index strategy (relies on root `isolation: isolate` in layout.tsx):
+//   Tooltip / Popover / Dropdown — no z-index, DOM order is sufficient
+//   Dialog backdrop + popup — z-50, ensures modal covers non-modal portals
+//   Toast — z-[99], always on top (defined in toast component)
+
 import { Dialog as BaseDialog } from '@base-ui/react/dialog'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
@@ -25,14 +30,14 @@ export function DialogContent({
     <BaseDialog.Portal>
       <BaseDialog.Backdrop
         className={cn(
-          'fixed inset-0 z-modal bg-background-overlay',
+          'fixed inset-0 z-50 bg-background-overlay',
           'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',
           overlayClassName,
         )}
       />
       <BaseDialog.Popup
         className={cn(
-          'fixed left-1/2 top-1/2 z-modal max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
+          'fixed left-1/2 top-1/2 z-50 max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
           'transition-all duration-150 data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',
           className,
         )}
diff --git a/web/app/components/base/ui/dropdown-menu/index.tsx b/web/app/components/base/ui/dropdown-menu/index.tsx
index 370aca7d1a..1f12be0464 100644
--- a/web/app/components/base/ui/dropdown-menu/index.tsx
+++ b/web/app/components/base/ui/dropdown-menu/index.tsx
@@ -43,7 +43,7 @@ export function DropdownMenuContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-dropdown outline-none', className)}
+        className={cn('outline-none', className)}
       >
         <Menu.Popup
           className={cn(
@@ -107,7 +107,7 @@ export function DropdownMenuSubContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-dropdown outline-none', className)}
+        className={cn('outline-none', className)}
       >
         <Menu.Popup
           className={cn(
diff --git a/web/app/components/base/ui/popover/index.tsx b/web/app/components/base/ui/popover/index.tsx
index 1c8fda08cf..cda7748ed2 100644
--- a/web/app/components/base/ui/popover/index.tsx
+++ b/web/app/components/base/ui/popover/index.tsx
@@ -38,7 +38,7 @@ export function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         alignOffset={alignOffset}
-        className={cn('z-popover outline-none', className)}
+        className={cn('outline-none', className)}
       >
         <BasePopover.Popup
           className={cn(
diff --git a/web/app/components/base/ui/tooltip/index.tsx b/web/app/components/base/ui/tooltip/index.tsx
index df96e61fdc..7a61ff5850 100644
--- a/web/app/components/base/ui/tooltip/index.tsx
+++ b/web/app/components/base/ui/tooltip/index.tsx
@@ -40,7 +40,7 @@ const Tooltip = React.memo(({
           side={side}
           align={align}
           sideOffset={offset}
-          className="z-tooltip outline-none"
+          className="outline-none"
         >
           <BaseTooltip.Popup
             className={cn(
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index e6976c0960..cbd58e2809 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -161,13 +161,6 @@ const config = {
         'progress-bar-indeterminate-stripe': 'var(--color-progress-bar-indeterminate-stripe)',
         'chat-answer-human-input-form-divider-bg': 'var(--color-chat-answer-human-input-form-divider-bg)',
       },
-      zIndex: {
-        dropdown: '1000',
-        popover: '1100',
-        modal: '1200',
-        toast: '1300',
-        tooltip: '1400',
-      },
       animation: {
         'spin-slow': 'spin 2s linear infinite',
       },