fix(dify-ui): let portal order stack overlays so nested modals block clicks (#44214)

Author: lyzno1

.agents/skills/frontend-code-review/references/code-quality.md

@@ -38,7 +38,7 @@ Flag:
 - `!` important modifiers or important CSS overrides without a narrow, documented reason.
 - Manual class-list assembly through string concatenation, template strings, array `.join(' ')`, or a custom conditional combiner instead of `cn(...)`. Conditional values passed to `cn(...)` remain valid.
 - Incoming `className` placed before default classes in `cn(...)`, preventing call-site overrides.
-- Arbitrary z-index or one-off layering fixes on overlays.
+- Z-index, forced backdrops, or other one-off layering fixes on overlays and body-level portals.
 
 Use:
 

packages/dify-ui/docs/overlays.md

@@ -44,20 +44,17 @@ clipping.
 
 ## Layering
 
-| Layer                                                                   | z-index |
-| ----------------------------------------------------------------------- | ------- |
-| Dialogs, pickers, drawers, menus, popovers, preview cards, and tooltips | `z-50`  |
-| Toast viewport                                                          | `z-60`  |
-
-Overlays at `z-50` rely on portal DOM order; the portal mounted later appears above earlier ones.
-Toast remains one layer above ordinary overlays.
+Overlays set no z-index; portal DOM order stacks them. A Base UI modal blocks outside clicks with
+an unstyled sibling of its popup, so any overlay z-index can lift a lower layer above that guard.
+Only a body-level layer that must stay above overlays mounted after it sets one. A portal into an
+application container sits inside the isolated root and layers against its siblings there.
 
 Positioners hide with their anchor: Base UI marks them `data-anchor-hidden` when the anchor is
 clipped, `display: none` or unmounted, and the shared positioner class turns that into
 `visibility: hidden` plus `pointer-events: none` so a popup never lingers at the viewport origin.
 
-- Do not add call-site `z-*` overrides. Fix the owning overlay structure when content is clipped
-  or hidden.
+- Do not add call-site `z-*` overrides or force a backdrop to block clicks. Fix the owning overlay
+  structure when content is clipped, hidden, or clickable behind a modal.
 - Do not wrap a Dify UI overlay in another manual portal.
 - Add shared backdrop or presentation chrome inside the owning exported component, not at call
   sites.

packages/dify-ui/src/alert-dialog/index.tsx

@@ -64,7 +64,7 @@ function AlertDialogContent({
       <BaseAlertDialog.Popup
         className={(state) =>
           cn(
-            'fixed top-1/2 left-1/2 z-50 max-h-[calc(100vh-2rem)] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
+            'fixed top-1/2 left-1/2 max-h-[calc(100vh-2rem)] w-120 max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
             modalPopupAnimationClassName,
             resolveClassName(className, state),
           )

packages/dify-ui/src/dialog/index.tsx

@@ -51,7 +51,7 @@ type DialogViewportProps = BaseDialog.Viewport.Props
 function DialogViewport({ className, ...props }: DialogViewportProps) {
   return (
     <BaseDialog.Viewport
-      className={(state) => cn('fixed inset-0 z-50', resolveClassName(className, state))}
+      className={(state) => cn('fixed inset-0', resolveClassName(className, state))}
       {...props}
     />
   )
@@ -64,7 +64,7 @@ function DialogPopup({ className, ...props }: DialogPopupProps) {
     <BaseDialog.Popup
       className={(state) =>
         cn(
-          'z-50 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl',
+          'rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl',
           modalPopupAnimationClassName,
           resolveClassName(className, state),
         )

packages/dify-ui/src/drawer/index.tsx

@@ -51,7 +51,7 @@ function DrawerBackdrop({ className, ...props }: DrawerBackdropProps) {
     <BaseDrawer.Backdrop
       className={(state) =>
         cn(
-          'absolute inset-0 z-50 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
+          'absolute inset-0 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
           'transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none',
           resolveClassName(className, state),
         )
@@ -68,7 +68,7 @@ function DrawerViewport({ className, ...props }: DrawerViewportProps) {
     <BaseDrawer.Viewport
       className={(state) =>
         cn(
-          'fixed inset-0 z-50 touch-none overflow-hidden overscroll-contain outline-hidden',
+          'fixed inset-0 touch-none overflow-hidden overscroll-contain outline-hidden',
           resolveClassName(className, state),
         )
       }
@@ -84,7 +84,7 @@ function DrawerPopup({ className, ...props }: DrawerPopupProps) {
     <BaseDrawer.Popup
       className={(state) =>
         cn(
-          'fixed z-50 flex min-h-0 touch-none flex-col overflow-hidden border-[0.5px] border-components-panel-border bg-components-panel-bg text-text-primary shadow-xl outline-hidden',
+          'fixed flex min-h-0 touch-none flex-col overflow-hidden border-[0.5px] border-components-panel-border bg-components-panel-bg text-text-primary shadow-xl outline-hidden',
           'transition-[transform,opacity,box-shadow] duration-200 data-swiping:duration-0 data-swiping:select-none motion-reduce:transition-none',
           'data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:h-dvh data-[swipe-direction=right]:w-120 data-[swipe-direction=right]:max-w-[calc(100vw-2rem)] data-[swipe-direction=right]:transform-[translateX(var(--drawer-swipe-movement-x,0px))] data-[swipe-direction=right]:rounded-l-2xl data-[swipe-direction=right]:border-r-0',
           'data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))] data-starting-style:data-[swipe-direction=right]:transform-[translateX(calc(100%+2px))]',

packages/dify-ui/src/internal/overlay.ts

@@ -10,10 +10,10 @@ export const floatingPopupAnimationClassName =
 // Positioners hide with their anchor: Base UI only emits `data-anchor-hidden` when the anchor is
 // clipped, display:none or unmounted, and would otherwise keep the popup at the viewport origin.
 export const positionerClassName =
-  'z-50 outline-hidden data-anchor-hidden:invisible data-anchor-hidden:pointer-events-none'
+  'outline-hidden data-anchor-hidden:invisible data-anchor-hidden:pointer-events-none'
 export const hintPopupClassName =
   'max-w-75 rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg p-1.5 text-start system-xs-medium wrap-break-word text-text-secondary shadow-[0px_12px_16px_-4px_var(--color-shadow-shadow-5),0px_4px_6px_-2px_var(--color-shadow-shadow-1)] backdrop-blur-[5px] origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0 motion-reduce:transition-none'
 export const modalBackdropClassName =
-  'absolute inset-0 z-50 bg-background-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none'
+  'absolute inset-0 bg-background-overlay transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none'
 export const modalPopupAnimationClassName =
   'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none'

packages/dify-ui/src/popover/index.tsx

@@ -47,7 +47,7 @@ type PopoverBackdropProps = BasePopover.Backdrop.Props
 function PopoverBackdrop({ className, ...props }: PopoverBackdropProps) {
   return (
     <BasePopover.Backdrop
-      className={(state) => cn('fixed inset-0 z-50', resolveClassName(className, state))}
+      className={(state) => cn('fixed inset-0', resolveClassName(className, state))}
       {...props}
     />
   )

packages/dify-ui/src/toast/index.tsx

@@ -240,7 +240,7 @@ function Toaster({
     <BaseToast.Provider toastManager={toastManager} timeout={timeout} limit={limit}>
       <BaseToast.Portal>
         <BaseToast.Viewport
-          className="pointer-events-none fixed top-4 right-4 z-60 w-90 max-w-[calc(100vw-2rem)] overflow-visible sm:right-8"
+          className="pointer-events-none fixed top-4 right-4 z-50 w-90 max-w-[calc(100vw-2rem)] overflow-visible sm:right-8"
           style={offset}
         >
           {children}

web/app/components/base/agent-log-modal/__tests__/index.spec.tsx

@@ -156,7 +156,7 @@ describe('AgentLogModal', () => {
     const modal = screen.getByRole('dialog')
     expect(container).not.toContainElement(modal)
     expect(document.body).toContainElement(modal)
-    expect(modal).toHaveClass('fixed', 'z-50', 'w-120!', 'left-[max(8px,calc(100vw-1136px))]!')
+    expect(modal).toHaveClass('fixed', 'w-120!', 'left-[max(8px,calc(100vw-1136px))]!')
   })
 
   it('should call onCancel when close button is clicked', () => {

web/app/components/base/chat/chat-with-history/inputs-form/__tests__/content.spec.tsx

@@ -333,27 +333,6 @@ describe('InputsFormContent', () => {
     )
   })
 
-  it('renders select dropdown on the shared dify-ui overlay layer', async () => {
-    const user = userEvent.setup()
-    const context = createMockContext({
-      inputsForms: [
-        {
-          variable: 'sel',
-          type: InputVarType.select,
-          label: 'Sel',
-          options: ['A', 'B'],
-          default: 'B',
-        },
-      ],
-      currentConversationInputs: {},
-    })
-
-    renderWithContext(<InputsFormContent />, context)
-    await user.click(screen.getByText('B'))
-
-    expect(screen.getByText('A').closest('.z-50')).not.toBeNull()
-  })
-
   it('handles select input with existing value (value not in options -> shows placeholder)', () => {
     const context = createMockContext({
       inputsForms: [