From 60242d3237240ab9f9f935f1f98fe05d8fd13c0b Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Tue, 3 Aug 2021 13:34:46 +0200
Subject: [PATCH] trying to figure out why event types modal is not working
 correctly on mobile safari

---
 pages/event-types/index.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx
index fdee2bed..10efd81e 100644
--- a/pages/event-types/index.tsx
+++ b/pages/event-types/index.tsx
@@ -521,14 +521,32 @@ export default function Availability({ user, types }) {
             role="dialog"
             aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+              {/* <!--
+                          Background overlay, show/hide based on modal state.
+
+                          Entering: "ease-out duration-300"
+                            From: "opacity-0"
+                            To: "opacity-100"
+                          Leaving: "ease-in duration-200"
+                            From: "opacity-100"
+                            To: "opacity-0"
+                        --> */}
               <div
                 className="fixed inset-0 bg-gray-500 z-0 bg-opacity-75 transition-opacity"
                 aria-hidden="true"></div>
-
               <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
                 &#8203;
               </span>
+              {/* <!--
+                          Modal panel, show/hide based on modal state.
 
+                          Entering: "ease-out duration-300"
+                            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                            To: "opacity-100 translate-y-0 sm:scale-100"
+                          Leaving: "ease-in duration-200"
+                            From: "opacity-100 translate-y-0 sm:scale-100"
+                            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        --> */}
               <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">
                 <div className="mb-4">
                   <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">