From 9c8af14908aca2ff278f16c9e71088570f2eb562 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 20 May 2019 16:21:53 -0400
Subject: [PATCH] render modal at the root level using portal

---
 src/App.vue                                   |  1 +
 src/components/dialog_modal/dialog_modal.vue  |  2 ++
 .../moderation_tools/moderation_tools.vue     | 26 ++++++++++---------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 21abd694e3..769e075dca 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 7621fb2024..3da543decb 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/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 {
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 146673a568..6a5e8cc006 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/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)'>
-    <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
-    <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-    <span slot="footer">
-      <button @click='deleteUserDialog(false)'>
-        {{ $t('general.cancel') }}
-      </button>
-      <button class="danger" @click='deleteUser()'>
-        {{ $t('user_card.admin_menu.delete_user') }}
-      </button>
-    </span>
-  </DialogModal>
+  <portal to="modal">
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
+      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+      <template slot="footer">
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
+          {{ $t('general.cancel') }}
+        </button>
+        <button class="btn btn-default danger" @click='deleteUser()'>
+          {{ $t('user_card.admin_menu.delete_user') }}
+        </button>
+      </template>
+    </DialogModal>
+  </portal>
 </div>
 </template>