From 21a2bfc3d0266e458739f3b2883397cdefa3ae54 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Thu, 27 Jun 2024 13:22:52 +0900
Subject: [PATCH] feat: add additional layer to make dialog scrollable when
 overflowed

---
 packages/react/components/Dialog/Component.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/react/components/Dialog/Component.tsx b/packages/react/components/Dialog/Component.tsx
index 3ffa65d..b0051ac 100644
--- a/packages/react/components/Dialog/Component.tsx
+++ b/packages/react/components/Dialog/Component.tsx
@@ -55,7 +55,7 @@ const DialogTrigger = ({ children }: DialogTriggerProps) => {
  */
 
 const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
-  base: "fixed inset-0 z-50 w-full h-full max-w-screen transition-all duration-300 flex flex-col justify-center items-center",
+  base: "fixed inset-0 z-50 w-full h-screen overflow-y-auto max-w-screen transition-all duration-300",
   variants: {
     opened: {
       true: "pointer-events-auto opacity-100",
@@ -72,9 +72,9 @@ const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
       lg: "backdrop-brightness-50",
     },
     padding: {
-      sm: "p-4",
-      md: "p-6",
-      lg: "p-8",
+      sm: "[&>div]:p-4",
+      md: "[&>div]:p-6",
+      lg: "[&>div]:p-8",
     },
   },
   defaults: {
@@ -114,7 +114,10 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
               onClick?.(e);
             }}
           >
-            {children}
+            <div className={"w-screen max-w-full min-h-screen flex flex-col justify-center items-center"}>
+              {/* Layer for overflow positioning */}
+              {children}
+            </div>
           </div>,
           document.body,
         )}