Allow scrolling when the dialog exceeds screen height (#3850)

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")}

packages/ui/Dialog.tsx

@@ -64,12 +64,12 @@ 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" />
+      <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(
-          "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",
+            "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"
@@ -81,6 +81,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           ref={forwardedRef}>
           {children}
         </DialogPrimitive.Content>
+      </DialogPrimitive.Overlay>
     </DialogPrimitive.Portal>
   )
 );