render modal at the root level using portal

src/App.vue

@@ -49,6 +49,7 @@
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
     <UserReportingModal />
+    <portal-target name="modal" />
   </div>
 </template>
 

src/components/dialog_modal/dialog_modal.vue

@@ -62,6 +62,7 @@
 
     .title {
       margin-bottom: 0;
+      text-align: center;
     }
   }
 
@@ -80,6 +81,7 @@
     background-color: var(--lightBg, $fallback--lightBg);
     border-top: 1px solid $fallback--bg;
     border-top: 1px solid var(--bg, $fallback--bg);
+    display: flex;
     justify-content: flex-end;
 
     button {

src/components/moderation_tools/moderation_tools.vue

@@ -65,18 +65,20 @@
       {{ $t('user_card.admin_menu.moderation') }}
     </button>
   </Popper>
-  <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+  <portal to="modal">
-    <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
-    <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
-    <span slot="footer">
+      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-      <button @click='deleteUserDialog(false)'>
+      <template slot="footer">
-        {{ $t('general.cancel') }}
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
-      </button>
+          {{ $t('general.cancel') }}
-      <button class="danger" @click='deleteUser()'>
+        </button>
-        {{ $t('user_card.admin_menu.delete_user') }}
+        <button class="btn btn-default danger" @click='deleteUser()'>
-      </button>
+          {{ $t('user_card.admin_menu.delete_user') }}
-    </span>
+        </button>
-  </DialogModal>
+      </template>
+    </DialogModal>
+  </portal>
 </div>
 </template>