mirror of
https://github.com/langgenius/dify.git
synced 2026-09-08 11:04:27 +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'
|
'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 { Dialog as BaseDialog } from '@base-ui/react/dialog'
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import { cn } from '@/utils/classnames'
|
import { cn } from '@/utils/classnames'
|
||||||
@ -25,14 +30,14 @@ export function DialogContent({
|
|||||||
<BaseDialog.Portal>
|
<BaseDialog.Portal>
|
||||||
<BaseDialog.Backdrop
|
<BaseDialog.Backdrop
|
||||||
className={cn(
|
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',
|
'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',
|
||||||
overlayClassName,
|
overlayClassName,
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<BaseDialog.Popup
|
<BaseDialog.Popup
|
||||||
className={cn(
|
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',
|
'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,
|
className,
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -43,7 +43,7 @@ export function DropdownMenuContent({
|
|||||||
align={align}
|
align={align}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
alignOffset={alignOffset}
|
alignOffset={alignOffset}
|
||||||
className={cn('z-dropdown outline-none', className)}
|
className={cn('outline-none', className)}
|
||||||
>
|
>
|
||||||
<Menu.Popup
|
<Menu.Popup
|
||||||
className={cn(
|
className={cn(
|
||||||
@ -107,7 +107,7 @@ export function DropdownMenuSubContent({
|
|||||||
align={align}
|
align={align}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
alignOffset={alignOffset}
|
alignOffset={alignOffset}
|
||||||
className={cn('z-dropdown outline-none', className)}
|
className={cn('outline-none', className)}
|
||||||
>
|
>
|
||||||
<Menu.Popup
|
<Menu.Popup
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
@ -38,7 +38,7 @@ export function PopoverContent({
|
|||||||
align={align}
|
align={align}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
alignOffset={alignOffset}
|
alignOffset={alignOffset}
|
||||||
className={cn('z-popover outline-none', className)}
|
className={cn('outline-none', className)}
|
||||||
>
|
>
|
||||||
<BasePopover.Popup
|
<BasePopover.Popup
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
@ -40,7 +40,7 @@ const Tooltip = React.memo(({
|
|||||||
side={side}
|
side={side}
|
||||||
align={align}
|
align={align}
|
||||||
sideOffset={offset}
|
sideOffset={offset}
|
||||||
className="z-tooltip outline-none"
|
className="outline-none"
|
||||||
>
|
>
|
||||||
<BaseTooltip.Popup
|
<BaseTooltip.Popup
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|||||||
@ -161,13 +161,6 @@ const config = {
|
|||||||
'progress-bar-indeterminate-stripe': 'var(--color-progress-bar-indeterminate-stripe)',
|
'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)',
|
'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: {
|
animation: {
|
||||||
'spin-slow': 'spin 2s linear infinite',
|
'spin-slow': 'spin 2s linear infinite',
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user