mirror of
https://github.com/langgenius/dify.git
synced 2026-05-13 08:57:28 +08:00
3d7872bdcf
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)
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
'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'
|
|
|
|
export const Dialog = BaseDialog.Root
|
|
export const DialogTrigger = BaseDialog.Trigger
|
|
export const DialogTitle = BaseDialog.Title
|
|
export const DialogDescription = BaseDialog.Description
|
|
export const DialogClose = BaseDialog.Close
|
|
|
|
type DialogContentProps = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
overlayClassName?: string
|
|
}
|
|
|
|
export function DialogContent({
|
|
children,
|
|
className,
|
|
overlayClassName,
|
|
}: DialogContentProps) {
|
|
return (
|
|
<BaseDialog.Portal>
|
|
<BaseDialog.Backdrop
|
|
className={cn(
|
|
'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-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,
|
|
)}
|
|
>
|
|
{children}
|
|
</BaseDialog.Popup>
|
|
</BaseDialog.Portal>
|
|
)
|
|
}
|