From 93df1bdc19a2085e53326c87b977aa4681045fcb Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 4 Jun 2019 18:50:58 -0400
Subject: [PATCH 1/2] Support scrolling when modal is tall

---
 src/components/Modal.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 41e51c7..a2e3b40 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <portal to="modals">
-    <div v-if="showModal" class="fixed inset-0 flex items-center justify-center">
+    <div v-if="showModal" class="fixed inset-0 overflow-y-auto">
       <transition
         @before-leave="backdropLeaving = true"
         @after-leave="backdropLeaving = false"
@@ -13,7 +13,7 @@
         appear
       >
         <div v-if="showBackdrop">
-          <div class="absolute inset-0 bg-black opacity-25" @click="close"></div>
+          <div class="fixed inset-0 bg-black opacity-25" @click="close"></div>
         </div>
       </transition>
 
@@ -28,8 +28,11 @@
         leave-to-class="opacity-0 scale-70"
         appear
       >
-        <div v-if="showContent" class="relative">
-          <slot></slot>
+        <div v-if="showContent" class="relative text-center">
+          <div class="inline-block align-middle w-0 h-screen"></div>
+          <div class="inline-block align-middle text-left my-6">
+            <slot></slot>
+          </div>
         </div>
       </transition>
     </div>

From 0dee53b3f15fbf65aea3d37ae24ecfbcc7dcbb46 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 6 Jun 2019 07:45:42 -0400
Subject: [PATCH 2/2] Make tall modal scrolling work properly in Firefox

---
 src/components/Modal.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a2e3b40..ed0ddf5 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <portal to="modals">
-    <div v-if="showModal" class="fixed inset-0 overflow-y-auto">
+    <div v-if="showModal" class="fixed inset-0">
       <transition
         @before-leave="backdropLeaving = true"
         @after-leave="backdropLeaving = false"
@@ -13,7 +13,7 @@
         appear
       >
         <div v-if="showBackdrop">
-          <div class="fixed inset-0 bg-black opacity-25" @click="close"></div>
+          <div class="fixed inset-0 bg-black opacity-25"></div>
         </div>
       </transition>
 
@@ -28,9 +28,9 @@
         leave-to-class="opacity-0 scale-70"
         appear
       >
-        <div v-if="showContent" class="relative text-center">
+        <div v-if="showContent" class="relative h-full overflow-y-auto text-center" @click="close">
           <div class="inline-block align-middle w-0 h-screen"></div>
-          <div class="inline-block align-middle text-left my-6">
+          <div class="inline-block align-middle text-left my-6" @click.stop>
             <slot></slot>
           </div>
         </div>
@@ -92,10 +92,12 @@ export default {
       this.showModal = true
       this.showBackdrop = true
       this.showContent = true
+      document.body.style.setProperty('overflow', 'hidden')
     },
     close() {
       this.showBackdrop = false
       this.showContent = false
+      document.body.style.removeProperty('overflow')
     }
   }
 }