From ffe0ef6dc532f5bf0226e074f95a351b36c5abbd Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 21 Sep 2023 17:45:06 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/FullPageDialog.tsx | 55 ++++++++++++-----------
 1 file changed, 29 insertions(+), 26 deletions(-)

(limited to 'FrontEnd/src/components/dialog/FullPageDialog.tsx')

diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index ad5abfde..b0a39ee3 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -4,6 +4,7 @@ import { CSSTransition } from "react-transition-group";
 
 import { ThemeColor } from "../common";
 import { IconButton } from "../button";
+import InPortal from "../InPortal";
 
 import "./FullPageDialog.css";
 
@@ -25,35 +26,37 @@ export default function FullPageDialog({
   const nodeRef = useRef(null);
 
   return (
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in={open}
-      timeout={300}
-      classNames="cru-dialog-full-page"
-    >
-      <div
-        ref={nodeRef}
-        className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
+    <InPortal>
+      <CSSTransition
+        nodeRef={nodeRef}
+        mountOnEnter
+        unmountOnExit
+        in={open}
+        timeout={300}
+        classNames="cru-dialog-full-page"
       >
-        <div className="cru-dialog-full-page-top-bar">
-          <IconButton
-            icon="arrow-left"
-            color="light"
-            className="cru-dialog-full-page-back-button"
-            onClick={onClose}
-          />
-        </div>
         <div
-          className={classNames(
-            "cru-dialog-full-page-content-container",
-            contentContainerClassName,
-          )}
+          ref={nodeRef}
+          className={`cru-dialog-full-page cru-theme-${color ?? "primary"}`}
         >
-          {children}
+          <div className="cru-dialog-full-page-top-bar">
+            <IconButton
+              icon="arrow-left"
+              color="light"
+              className="cru-dialog-full-page-back-button"
+              onClick={onClose}
+            />
+          </div>
+          <div
+            className={classNames(
+              "cru-dialog-full-page-content-container",
+              contentContainerClassName,
+            )}
+          >
+            {children}
+          </div>
         </div>
-      </div>
-    </CSSTransition>
+      </CSSTransition>
+    </InPortal>
   );
 }
-- 
cgit v1.2.3