From 5740123ee68fe59891b87bcaad297dc929346545 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 20 May 2019 16:19:59 -0400
Subject: [PATCH 1/2] install portal vue

---
 package.json | 1 +
 src/main.js  | 2 ++
 yarn.lock    | 4 ++++
 3 files changed, 7 insertions(+)

diff --git a/package.json b/package.json
index 30a317b201..5409645b6c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "popper.js": "^1.14.7",
+    "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
     "vue": "^2.5.13",
diff --git a/src/main.js b/src/main.js
index 92f843b1b2..e12db6a36d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -24,6 +24,7 @@ import messages from './i18n/messages.js'
 
 import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
+import PortalVue from 'portal-vue'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -42,6 +43,7 @@ Vue.use(VueTimeago, {
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
+Vue.use(PortalVue)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index cfc600c9ba..a91b520f69 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6101,6 +6101,10 @@ popper.js@^1.14.7:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
 
+portal-vue@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

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 2/2] 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>