Revert indentation changes

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -129,11 +129,17 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 }
 
 @mixin scroll-on-hover() {
-  overflow: hidden;
-
-  &:hover {
-    overflow-y: auto;
+  // Because firefox foes not support overflow: overlay
+  @-moz-document url-prefix() {
+    & {
+      overflow: hidden;
+      &:hover {
+        overflow-y: auto;
+      }
+    }
   }
+  overflow-y: overlay;
+  overflow-y: auto;
 }
 
 

app/javascript/dashboard/assets/scss/app.scss

@@ -1 +1,35 @@
 @import 'woot';
+
+* {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: 6px;
+  scrollbar-color: transparent;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+*:hover::-webkit-scrollbar {
+  display: block;
+}
+
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.2);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: rgba(128, 128, 128, 0.5);
+  border-radius: 3px;
+}

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -119,6 +119,7 @@
   flex-direction: column;
   height: 100%;
   margin: 0;
+  overflow-y: overlay;
   overflow-y: auto;
   padding-bottom: var(--space-normal);
   position: relative;

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -238,6 +238,7 @@ export default {
 }
 
 .secondary-sidebar {
+  overflow-y: overlay;
   overflow-y: auto;
   height: 100%;
 }

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -242,6 +242,7 @@ export default {
   background: white;
   border-left: 1px solid var(--color-border);
   font-size: $font-size-small;
+  overflow-y: overlay;
   overflow-y: auto;
   overflow: auto;
   position: relative;