From 0bb82478229b19adae998b9a32b05bcaa4ed0a4f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 28 Mar 2019 15:50:53 -0400
Subject: [PATCH] fix double scrollbar display bug in mobile

---
 src/App.js                                            |  9 ++++++++-
 src/App.scss                                          | 11 +++++++++++
 src/App.vue                                           |  2 +-
 .../user_reporting_modal/user_reporting_modal.vue     |  4 ++--
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index e72c73e3..87f00989 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,7 +39,14 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    isMobile: navigator.userAgent.match(/Android/i) ||
+      navigator.userAgent.match(/webOS/i) ||
+      navigator.userAgent.match(/iPhone/i) ||
+      navigator.userAgent.match(/iPad/i) ||
+      navigator.userAgent.match(/iPod/i) ||
+      navigator.userAgent.match(/BlackBerry/i) ||
+      navigator.userAgent.match(/Windows Phone/i)
   }),
   created () {
     // Load the locale from the storage
diff --git a/src/App.scss b/src/App.scss
index 6d16c7c9..c72529ac 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -839,3 +839,14 @@ nav {
 .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
   opacity: .5;
 }
+
+// Disable vuebar and use native scrollbar in mobile device
+#app.mobile {
+  .vb-content {
+    width: 100% !important;
+    padding-right: 0 !important;
+  }
+  .vb-dragger {
+    display: none;
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index cb7e8d78..229bf62b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app" v-bind:style="bgAppStyle">
+  <div id="app" v-bind:style="bgAppStyle" v-bind:class="{ mobile: isMobile }">
     <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
     <MobileNav v-if="isMobileLayout" />
     <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index bf668efc..41c01919 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -102,8 +102,8 @@
   }
 
   &-right {
-    overflow-y: auto;
-    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   &-sitem {