Add custom scrollbars

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

@@ -129,14 +129,19 @@ $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;
 }
 
-
 @mixin horizontal-scroll() {
   overflow-y: auto;
 }
@@ -154,7 +159,7 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   }
 
   &::before {
-    animation: spinner .9s linear infinite;
+    animation: spinner 0.9s linear infinite;
     border: 2px solid $spinner-before-border-color;
     border-radius: 50%;
     border-top-color: lighten($color-woot, 10%);
@@ -190,42 +195,28 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
     border-bottom: $size solid $color;
     border-left: $size solid transparent;
     border-right: $size solid transparent;
-  }
-
-  @else if $direction == 'right' {
+  } @else if $direction == 'right' {
     border-bottom: $size solid transparent;
     border-left: $size solid $color;
     border-top: $size solid transparent;
-  }
-
-  @else if $direction == 'bottom' {
+  } @else if $direction == 'bottom' {
     border-left: $size solid transparent;
     border-right: $size solid transparent;
     border-top: $size solid $color;
-  }
-
-  @else if $direction == 'left' {
+  } @else if $direction == 'left' {
     border-bottom: $size solid transparent;
     border-right: $size solid $color;
     border-top: $size solid transparent;
-  }
-
-  @else if $direction == 'top-left' {
+  } @else if $direction == 'top-left' {
     border-right: $size solid transparent;
     border-top: $size solid $color;
-  }
-
-  @else if $direction == 'top-right' {
+  } @else if $direction == 'top-right' {
     border-left: $size solid transparent;
     border-top: $size solid $color;
-  }
-
-  @else if $direction == 'bottom-left' {
+  } @else if $direction == 'bottom-left' {
     border-bottom: $size solid $color;
     border-right: $size solid transparent;
-  }
-
-  @else if $direction == 'bottom-right' {
+  } @else if $direction == 'bottom-right' {
     border-bottom: $size solid $color;
     border-left: $size solid transparent;
   }
@@ -237,10 +228,15 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   white-space: nowrap;
 }
 
-@mixin three-column-grid($column-one-width: 25.6rem,
-  $column-three-width: 25.6rem) {
+@mixin three-column-grid(
+  $column-one-width: 25.6rem,
+  $column-three-width: 25.6rem
+) {
   width: 100%;
   height: 100%;
   display: grid;
-  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax($column-three-width, 6fr);
+  grid-template-columns: minmax($column-one-width, 6fr) 10fr minmax(
+      $column-three-width,
+      6fr
+    );
 }

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;