Lets be smarter with modals here...

resources/assets/scripts/components/core/Modal.vue

@@ -2,7 +2,7 @@
     <transition name="modal">
         <div class="modal-mask" v-show="show" v-on:click="close">
             <div class="modal-container" @click.stop>
-                <div v-on:click="close">
+                <div v-on:click="close" v-if="dismissable">
                     <Icon name="x"
                           class="absolute pin-r pin-t m-2 text-neutral-500 cursor-pointer"
                           aria-label="Close modal"
@@ -27,10 +27,11 @@
             modalName: {type: String, default: 'modal'},
             show: {type: Boolean, default: false},
             closeOnEsc: {type: Boolean, default: true},
+            dismissable: {type: Boolean, default: true},
         },
 
         mounted: function () {
-            if (this.$props.closeOnEsc) {
+            if (this.$props.dismissable && this.$props.closeOnEsc) {
                 document.addEventListener('keydown', e => {
                     if (this.show && e.key === 'Escape') {
                         this.close();
@@ -41,8 +42,10 @@
 
         methods: {
             close: function () {
+                if (this.$props.dismissable) {
                     this.$emit('close', this.$props.modalName);
                 }
+            }
         },
     });
 </script>

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -16,7 +16,7 @@
                     <span class="spinner spinner-xl spinner-thick blue"></span>
                 </div>
             </div>
-            <TransitionGroup class="flex flex-wrap justify-center sm:justify-start" v-else>
+            <TransitionGroup class="flex flex-wrap justify-center sm:justify-start" tag="div" v-else>
                 <ServerBox
                         v-for="(server, index) in servers"
                         :key="index"

resources/assets/scripts/components/server/components/database/DatabaseRow.vue

@@ -31,26 +31,23 @@
                 </button>
             </div>
         </div>
-        <Modal :show="showDeleteModal" v-on:close="showDeleteModal = false">
         <DeleteDatabaseModal
                 :database="database"
+                :show="showDeleteModal"
                 v-on:close="showDeleteModal = false"
-                    v-if="showDeleteModal"
         />
-        </modal>
     </div>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
     import Icon from "@/components/core/Icon.vue";
-    import Modal from "@/components/core/Modal.vue";
     import {ServerDatabase} from "@/api/server/types";
     import DeleteDatabaseModal from "@/components/server/components/database/DeleteDatabaseModal.vue";
 
     export default Vue.extend({
         name: 'DatabaseRow',
-        components: {DeleteDatabaseModal, Modal, Icon},
+        components: {DeleteDatabaseModal, Icon},
         props: {
             database: {
                 type: Object as () => ServerDatabase,

resources/assets/scripts/components/server/components/database/DeleteDatabaseModal.vue

@@ -1,4 +1,6 @@
 <template>
+    <Modal v-on:close="closeModal" :show="show" :dismissable="!showSpinner">
+        <transition name="modal">
             <div>
                 <h2 class="font-medium text-neutral-900 mb-6">Delete this database?</h2>
                 <p class="text-neutral-900 text-sm">This action
@@ -9,7 +11,7 @@
                     <input type="text" class="input" v-model="nameConfirmation"/>
                 </div>
                 <div class="mt-6 text-right">
-            <button class="btn btn-sm btn-secondary mr-2" v-on:click="$emit('close')">Cancel</button>
+                    <button class="btn btn-sm btn-secondary mr-2" v-on:click="closeModal">Cancel</button>
                     <button class="btn btn-sm btn-red" :disabled="disabled" v-on:click="deleteDatabase">
                         <span class="spinner white" v-bind:class="{ hidden: !showSpinner }">&nbsp;</span>
                         <span :class="{ hidden: showSpinner }">
@@ -18,15 +20,23 @@
                     </button>
                 </div>
             </div>
+        </transition>
+    </Modal>
 </template>
 
 <script lang="ts">
     import Vue from 'vue';
     import {ServerDatabase} from "@/api/server/types";
+    import Modal from '@/components/core/Modal.vue';
 
     export default Vue.extend({
         name: 'DeleteDatabaseModal',
+        components: {Modal},
         props: {
+            show: {
+                type: Boolean,
+                default: false,
+            },
             database: {
                 type: Object as () => ServerDatabase,
                 required: true
@@ -84,6 +94,16 @@
                         this.$emit('close');
                     })
             },
+
+            /**
+             * Closes the modal and resets the entry field.
+             */
+            closeModal: function () {
+                this.showSpinner = false;
+                this.nameConfirmation = '';
+
+                this.$emit('close');
+            }
         },
     });
 </script>

resources/assets/styles/components/miscellaneous.css

@@ -76,7 +76,7 @@ code {
     }
 
     & > div {
-        @apply .flex .flex-col .h-full;
+        @apply .flex .flex-col;
         transition: box-shadow 150ms ease-in;
 
         &:hover {
@@ -85,7 +85,7 @@ code {
     }
 
     & > div > .server-card {
-        @apply .flex .flex-1 .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
+        @apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
         transition: all 100ms ease-in;
 
         & .identifier-icon {