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)
This commit is contained in:
yyh 2026-03-02 15:01:08 +08:00
parent f65159bd00
commit 3d7872bdcf
No known key found for this signature in database
5 changed files with 11 additions and 13 deletions

View File

@ -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,
)}

View File

@ -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(

View File

@ -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(

View File

@ -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(

View File

@ -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',
},