1 files changed, 32 insertions, 28 deletions
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index 15c898f1..2d0b34db 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -4,6 +4,8 @@ import { CSSTransition } from "react-transition-group";
 
 import { ThemeColor } from "../common";
 
+import InPortal from "../InPortal";
+
 import "./Dialog.css";
 
 interface DialogProps {
@@ -25,35 +27,37 @@ export default function Dialog({
   const lastPointerDownIdRef = useRef<number | null>(null);
 
   return (
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in={open}
-      timeout={300}
-      classNames="cru-dialog"
-    >
-      <div
-        ref={nodeRef}
-        className={classNames(
-          `cru-theme-${color ?? "primary"}`,
-          "cru-dialog-overlay",
-        )}
+    <InPortal>
+      <CSSTransition
+        nodeRef={nodeRef}
+        mountOnEnter
+        unmountOnExit
+        in={open}
+        timeout={300}
+        classNames="cru-dialog"
       >
         <div
-          className="cru-dialog-background"
-          onPointerDown={(e) => {
-            lastPointerDownIdRef.current = e.pointerId;
-          }}
-          onPointerUp={(e) => {
-            if (lastPointerDownIdRef.current === e.pointerId) {
-              if (!disableCloseOnClickOnOverlay) onClose();
-            }
-            lastPointerDownIdRef.current = null;
-          }}
-        />
-        <div className="cru-dialog-container">{children}</div>
-      </div>
-    </CSSTransition>
+          ref={nodeRef}
+          className={classNames(
+            `cru-theme-${color ?? "primary"}`,
+            "cru-dialog-overlay",
+          )}
+        >
+          <div
+            className="cru-dialog-background"
+            onPointerDown={(e) => {
+              lastPointerDownIdRef.current = e.pointerId;
+            }}
+            onPointerUp={(e) => {
+              if (lastPointerDownIdRef.current === e.pointerId) {
+                if (!disableCloseOnClickOnOverlay) onClose();
+              }
+              lastPointerDownIdRef.current = null;
+            }}
+          />
+          <div className="cru-dialog-container">{children}</div>
+        </div>
+      </CSSTransition>
+    </InPortal>
   );
 }