From 961430f988e481076fd95fcbaee7e7506b54b8e8 Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 25 May 2026 17:53:03 +0200
Subject: [PATCH] [CB] Menu is displayed under opened forms in the
 Administration page (#4358)

* dbeaver/pro#9362 fixes z-indexes issues for dialogs and notifications

* moves getPersistentElements to dialog level so all dialogs can handle it

* adds data-dialog-persistent-notification

* fixes resize controls layering

* fixes issue with panel buttons layering

* cleanup

---------

Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css    | 1 +
 .../CommonDialog/CommonDialog/CommonDialogWrapper.tsx    | 9 +++++++++
 .../core-notifications/src/Notifications.module.css      | 2 +-
 webapp/packages/core-notifications/src/Notifications.tsx | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css b/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css
index b54377c0b7..f34afeedc1 100644
--- a/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css
+++ b/webapp/common-react/@dbeaver/ui-kit/src/Menu/Menu.css
@@ -17,6 +17,7 @@
     outline: 0;
     padding-block: var(--dbv-kit-menu-popover-padding-block);
     padding-inline: var(--dbv-kit-menu-popover-padding-inline);
+    z-index: 1000;
 
     @media (prefers-reduced-motion: no-preference) {
       opacity: 0;
diff --git a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
index 6a0f6e2e02..e814e340e8 100644
--- a/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
+++ b/webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx
@@ -55,12 +55,21 @@ export const CommonDialogWrapper = observer<CommonDialogWrapperProps, HTMLDivEle
       }
     }
 
+    // We need to specify persistent notifications for the dialog to make them accessible when the dialog is open.
+    function getDefaultPersistentElements(): Element[] {
+      const dialogs = document.querySelectorAll('[data-dialog]');
+      const persistentNotifications = document.querySelectorAll('[data-dialog-persistent-notification]');
+
+      return [...dialogs, ...persistentNotifications];
+    }
+
     return (
       <Dialog
         ref={ref}
         aria-label={ariaLabel}
         open={context.visible}
         data-size={size}
+        getPersistentElements={getDefaultPersistentElements}
         className={s(computedStyles, { dialog: true, fixedSize, fixedWidth, freeHeight }, 'tw:shadow-xlarge', className)}
         autoFocusOnShow={autoFocusOnShow}
         autoFocusOnHide={autoFocusOnHide}
diff --git a/webapp/packages/core-notifications/src/Notifications.module.css b/webapp/packages/core-notifications/src/Notifications.module.css
index 3ed3fd93cf..4271dc50f4 100644
--- a/webapp/packages/core-notifications/src/Notifications.module.css
+++ b/webapp/packages/core-notifications/src/Notifications.module.css
@@ -15,5 +15,5 @@
   flex-direction: column-reverse;
   flex-wrap: nowrap;
   justify-content: flex-end;
-  z-index: 1000; /* modal dialogs is 999, but more correct way is place notifications after dialogs in the dom */
+  z-index: 1100; /* Dialog has z-index: 1000 so to show it above backdrop we need to keep it higher */
 }
diff --git a/webapp/packages/core-notifications/src/Notifications.tsx b/webapp/packages/core-notifications/src/Notifications.tsx
index 8a36bc2f98..7c2cc6c90e 100644
--- a/webapp/packages/core-notifications/src/Notifications.tsx
+++ b/webapp/packages/core-notifications/src/Notifications.tsx
@@ -22,7 +22,7 @@ export const Notifications = observer(function Notifications() {
 
   return (
     <Portal>
-      <div className={s(style, { notifications: true })} data-dialog-persistent-element>
+      <div className={s(style, { notifications: true })} data-dialog-persistent-element data-dialog-persistent-notification>
         {notificationService.visibleNotifications.map(notification => (
           <NotificationsItem key={notification.id} notification={notification} />
         ))}