From 358d733b5f706f77ad3aaaaf65cc95d3577142b2 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Mon, 15 Aug 2022 17:22:58 +0100
Subject: [PATCH] Allow scrolling when the dialog exceeds screen height (#3850)

---
 .../components/eventtype/CreateEventType.tsx  |  2 +-
 packages/ui/Dialog.tsx                        | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index 782e669b89..237b51d726 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -152,7 +152,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
         options={props.options}
       />
 
-      <DialogContent className="overflow-y-auto">
+      <DialogContent>
         <div className="mb-4">
           <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
             {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
diff --git a/packages/ui/Dialog.tsx b/packages/ui/Dialog.tsx
index 4a486156f1..9a100a7086 100644
--- a/packages/ui/Dialog.tsx
+++ b/packages/ui/Dialog.tsx
@@ -64,23 +64,24 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
   ({ children, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
-      {/*zIndex one less than Toast */}
-      <DialogPrimitive.Content
-        {...props}
-        className={classNames(
-          "fadeIn fixed left-1/2 top-1/2 z-[9998] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
-          props.size == "xl"
-            ? "p-0.5 sm:max-w-[98vw]"
-            : props.size == "lg"
-            ? "p-6 sm:max-w-[70rem]"
-            : "p-6 sm:max-w-[35rem]",
-          "max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
-          `${props.className || ""}`
-        )}
-        ref={forwardedRef}>
-        {children}
-      </DialogPrimitive.Content>
+      <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 grid place-items-center overflow-y-auto bg-gray-500 bg-opacity-75 py-4 transition-opacity">
+        {/*zIndex one less than Toast */}
+        <DialogPrimitive.Content
+          {...props}
+          className={classNames(
+            "min-w-[360px] rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
+            props.size == "xl"
+              ? "p-0.5 sm:max-w-[98vw]"
+              : props.size == "lg"
+              ? "p-6 sm:max-w-[70rem]"
+              : "p-6 sm:max-w-[35rem]",
+            "max-h-[560px] overflow-visible overscroll-auto md:h-auto md:max-h-[inherit]",
+            `${props.className || ""}`
+          )}
+          ref={forwardedRef}>
+          {children}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Overlay>
     </DialogPrimitive.Portal>
   )
 );