Support modals with content outside the white background area

Author: DaneEveritt

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>

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.