mirror of
https://github.com/langgenius/dify.git
synced 2026-05-10 14:14:17 +08:00
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:
parent
f65159bd00
commit
3d7872bdcf
@ -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,
|
||||
)}
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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',
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user