use custom scrollbar

package.json

@@ -35,6 +35,7 @@
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",
     "vue-timeago": "^3.1.2",
+    "vuebar": "^0.0.20",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
     "whatwg-fetch": "^2.0.3"

src/App.scss

@@ -795,3 +795,47 @@ nav {
     }
   }
 }
+
+// Vuebar default style
+.vb > .vb-dragger {
+  z-index: 5;
+  width: 12px;
+  right: 0;
+}
+
+.vb > .vb-dragger > .vb-dragger-styler {
+  backface-visibility: hidden;
+  transform: rotate3d(0,0,0,0);
+  transition:
+    opacity 100ms ease-out,
+    margin 100ms ease-out,
+    height 100ms ease-out;
+
+  background-color: $fallback--text;
+  background-color: var(--text, $fallback--text);
+  opacity: .1;
+  margin: 5px 5px 5px 0;
+  border-radius: 20px;
+  height: calc(100% - 10px);
+  display: block;
+}
+
+.vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
+  opacity: .3;
+}
+
+.vb > .vb-dragger:hover > .vb-dragger-styler {
+  opacity: .5;
+  margin: 0px;
+  height: 100%;
+}
+
+.vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
+  opacity: .5;
+  margin: 0px;
+  height: 100%;
+}
+
+.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
+  opacity: .5;
+}

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -27,10 +27,12 @@
           </div>
         </div>
       </div>
-      <div class="user-reporting-panel-right">
+      <div class="user-reporting-panel-right" v-bar>
-        <div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem">
+        <div>
-          <Status :inConversation="false" :focused="false" :statusoid="status" />
+          <div v-for="status in statuses" :key="status.id" class="status-fadein user-reporting-panel-sitem">
-          <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" />
+            <Status :inConversation="false" :focused="false" :statusoid="status" />
+            <Checkbox :checked="isChecked(status.id)" @change="checked => toggleStatus(checked, status.id)" />
+          </div>
         </div>
       </div>
     </div>
@@ -111,6 +113,7 @@
     border-bottom-style: solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
+    padding-right: 15px;
 
     > .status-el {
       flex: 1;

src/main.js

@@ -16,6 +16,7 @@ import reportsModule from './modules/reports.js'
 
 import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
+import Vuebar from 'vuebar'
 
 import createPersistedState from './lib/persisted_state.js'
 import pushNotifications from './lib/push_notifications_plugin.js'
@@ -42,6 +43,7 @@ Vue.use(VueTimeago, {
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
+Vue.use(Vuebar)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

yarn.lock

@@ -6491,6 +6491,10 @@ vue@^2.5.13:
   version "2.5.21"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
 
+vuebar@^0.0.20:
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200"
+
 vuelidate@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.4.tgz#5a0e54be09ac0192f1aa3387d74b92e0945bf8aa"