From da2044fb10b71624e47fbe965f535925e60fee86 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Tue, 14 May 2019 16:48:38 -0700
Subject: [PATCH] Support modals with content outside the white background area

---
 resources/assets/scripts/components/core/Modal.vue |  4 +++-
 resources/assets/styles/components/modal.css       | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/assets/scripts/components/core/Modal.vue b/resources/assets/scripts/components/core/Modal.vue
index 560516df7..7582bb09a 100644
--- a/resources/assets/scripts/components/core/Modal.vue
+++ b/resources/assets/scripts/components/core/Modal.vue
@@ -5,7 +5,9 @@
                 <div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
                     <Icon name="x" aria-label="Close modal" role="button"/>
                 </div>
-                <slot/>
+                <div class="modal-content">
+                    <slot/>
+                </div>
             </div>
         </div>
     </transition>
diff --git a/resources/assets/styles/components/modal.css b/resources/assets/styles/components/modal.css
index ad87f5e45..f1ca603a9 100644
--- a/resources/assets/styles/components/modal.css
+++ b/resources/assets/styles/components/modal.css
@@ -4,9 +4,7 @@
   transition: opacity 250ms ease;
 
   & > .modal-container {
-    @apply .relative .bg-white .w-full .max-w-md .m-auto .flex-col .flex .rounded .shadow-md;
-    transition: all 250ms ease;
-    margin-top: 15%;
+    @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
 
     & > .modal-close-icon {
       @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
@@ -19,6 +17,12 @@
       }
     }
 
+    & > .modal-content {
+      @apply .bg-white .rounded .shadow-md;
+      transition: all 250ms ease;
+      margin-top: 15%;
+    }
+
     /**
      * On tiny phone screens make sure there is a margin on the sides and also
      * center the modal rather than putting it towards the top of the screen.