fix(core): dialog styles

webapp/packages/core/src/dialogs/CommonDialog/CommonDialogWrapper.tsx

@@ -39,6 +39,7 @@ const style = composes(
     padding: 0;
     margin: 0;
     border: none;
+    height: auto;
     min-width: 748px;
     max-height: 100%;
     border-radius: 0.25rem;

webapp/packages/core/src/dialogs/CommonDialog/DialogsPortal.tsx

@@ -13,6 +13,7 @@ import {
   DialogBackdrop,
   useDialogState,
 } from 'reakit/Dialog';
+import { Portal } from 'reakit/Portal';
 import styled from 'reshadow';
 
 import { useService } from '@dbeaver/core/di';
@@ -63,19 +64,26 @@ function NestedDialog(props: NestedDialogType) {
     (result: any) => props.resolveDialog(props.dialog, result),
     [props.dialog, props.resolveDialog]
   );
+  const backdropClickCallback = useCallback(() => {
+    if (!props.dialog.options?.persistent) {
+      handleReject();
+    }
+  }, [props.dialog.options?.persistent, handleReject]);
 
   const DialogComponent = props.dialog.component;
 
   // TODO: place Dialog inside CommonDialogWrapper, so we can pass aria-label
   return styled(styles)(
-    <Dialog {...dialogState} aria-label="can't be provided" tabIndex={0}>
-      <DialogBackdrop {...dialogState} onClick={props.dialog.options?.persistent ? () => {} : handleReject} />
-      <DialogComponent
-        payload={props.dialog.payload}
-        options={props.dialog.options}
-        resolveDialog={handleResolve}
-        rejectDialog={handleReject}
-      />
-    </Dialog>
+    <>
+      <Portal><DialogBackdrop {...dialogState} onClick={backdropClickCallback} /></Portal>
+      <Dialog {...dialogState} aria-label="can't be provided" tabIndex={0} >
+        <DialogComponent
+          payload={props.dialog.payload}
+          options={props.dialog.options}
+          resolveDialog={handleResolve}
+          rejectDialog={handleReject}
+        />
+      </Dialog>
+    </>
   );
 }

webapp/packages/core/src/dialogs/CommonDialog/styles.ts

@@ -11,24 +11,23 @@ import { css } from 'reshadow';
 export const dialogStyles = css`
     DialogBackdrop {
       box-sizing: border-box;
-      background-color: #0000007a;
+      background-color: rgba(0,0,0,0.48);
       position: fixed;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
+      z-index: 999;
     }
 
     Dialog {
       box-sizing: border-box;
       display: flex;
       position: fixed;
-      align-items: center;
-      justify-content: center;
-      top: 0;
-      padding: 54px;
-      width: 100%;
-      height: 100%;
+      top: 50%;
+      left: 50%;
+      max-height: calc(100vh);
+      transform: translate(-50%, -50%);
       z-index: 999;
     }
   `;