Changed the mechanism by which we center the dialog

components/Dialog.tsx

@@ -3,7 +3,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 export function Dialog({ children, ...props }) {
   return (
-    <DialogPrimitive.Root {...props} className="fixed z-10 inset-0 overflow-y-auto">
+    <DialogPrimitive.Root {...props}>
       <DialogPrimitive.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
       {children}
     </DialogPrimitive.Root>
@@ -13,11 +13,9 @@ export function Dialog({ children, ...props }) {
 export const DialogContent = React.forwardRef(({ children, ...props }, forwardedRef) => (
   <DialogPrimitive.Content
     {...props}
-    ref={forwardedRef}
-    className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-    <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+    className="fixed bg-white rounded top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-left overflow-hidden shadow-xl sm:align-middle sm:max-w-lg sm:w-full p-6"
+    ref={forwardedRef}>
     {children}
-    </div>
   </DialogPrimitive.Content>
 ));
 

pages/event-types/index.tsx

@@ -148,16 +148,14 @@ export default function Availability({ user, types }) {
               </div>
             </div>
           </div>
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <button type="submit" className="btn btn-primary">
-                Create
+              Continue
             </button>
-              <DialogClose as="button" className="btn btn-white ml-2">
+            <DialogClose as="button" className="btn btn-white mx-2">
               Cancel
             </DialogClose>
           </div>
-          </div>
         </form>
       </DialogContent>
     </Dialog>