[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

@@ -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;

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}

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 */
 }

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} />
         ))}