feat: add additional layer to make dialog scrollable when overflowed

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",
+      sm: "[&>div]:p-4",
-      md: "p-6",
+      md: "[&>div]:p-6",
-      lg: "p-8",
+      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,
         )}