Fix scrollbar styles across the app

stylesheets/components/CallsTab.scss

@@ -209,7 +209,7 @@
 }
 
 .CallsList__List {
-  @include mixins.NavTabs__Scroller;
+  @include mixins.scrollbar-on-hover;
 }
 
 .CallsList__List--disableScrolling {
@@ -342,7 +342,7 @@
 }
 
 .CallsNewCall__List {
-  @include mixins.NavTabs__Scroller;
+  @include mixins.scrollbar-on-hover;
 }
 
 .CallsNewCall__ListHeaderItem {

stylesheets/components/CompositionInput.scss

@@ -24,14 +24,6 @@
         inset-inline: 0;
         font-style: normal;
       }
-      &::-webkit-scrollbar-thumb {
-        @include mixins.light-theme {
-          border-color: variables.$color-gray-05;
-        }
-        @include mixins.dark-theme {
-          border-color: variables.$color-gray-75;
-        }
-      }
     }
   }
 
@@ -93,15 +85,6 @@
       max-height: calc(72px - 2 * $border-size);
       overflow: auto;
 
-      &::-webkit-scrollbar-thumb {
-        @include mixins.light-theme {
-          border-color: variables.$color-gray-05;
-        }
-        @include mixins.dark-theme {
-          border-color: variables.$color-gray-75;
-        }
-      }
-
       &--large {
         $largeHeight: calc(212px - 2 * $border-size);
         $largeHeightContentBox: calc($largeHeight - 2 * $padding-top);

stylesheets/components/ConversationPanel.scss

@@ -7,7 +7,7 @@
 .ConversationPanel {
   height: 100%;
   inset-inline-start: 0;
-  overflow-y: overlay;
+  overflow-y: auto;
   position: absolute;
   top: 0;
   width: 100%;

stylesheets/components/ConversationView.scss

@@ -16,7 +16,7 @@
       100% - #{variables.$header-height} - var(--title-bar-drag-area-height)
     );
     inset-inline-start: 0;
-    overflow-y: overlay;
+    overflow-y: auto;
     position: absolute;
     top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
     width: 100%;

stylesheets/components/CountryCodeSelect.scss

@@ -70,10 +70,6 @@
     max-height: 344px;
     overflow-y: scroll;
     scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   &__CountryButton {

stylesheets/components/Modal.scss

@@ -119,10 +119,10 @@
   }
 
   &__body {
-    @include mixins.scrollbar;
+    @include mixins.scrollbar-on-hover;
     @include mixins.font-body-1;
     margin: 0;
-    overflow-y: overlay;
+    overflow-y: auto;
     overflow-x: auto;
     transition: border-color 150ms ease-in-out;
   }

stylesheets/components/Preferences.scss

@@ -54,17 +54,6 @@ $secondary-text-color: light-dark(
   &__scroll-area {
     overflow-y: scroll;
     max-height: 100%;
-
-    &::-webkit-scrollbar-thumb {
-      @include mixins.light-theme {
-        background: variables.$color-gray-25;
-        border-color: variables.$color-gray-04;
-      }
-      @include mixins.dark-theme {
-        background: variables.$color-gray-45;
-        border-color: variables.$color-gray-80;
-      }
-    }
   }
 
   &__padding {
@@ -346,10 +335,6 @@ $secondary-text-color: light-dark(
     padding-top: 8px;
     max-width: 750px;
     position: relative;
-
-    &::-webkit-scrollbar-corner {
-      background: transparent;
-    }
   }
 
   &__settings-pane-content--with-footer {
@@ -1223,10 +1208,6 @@ $secondary-text-color: light-dark(
 
 .Preferences__EditChatFolderPage__SelectChatsDialog {
   height: 60vw;
-
-  .module-conversation-list::-webkit-scrollbar-thumb {
-    border-color: light-dark(variables.$color-white, variables.$color-gray-80);
-  }
 }
 
 .Preferences__EditChatFolderPage__SelectChatsDialog__body {
@@ -1249,8 +1230,5 @@ $secondary-text-color: light-dark(
 }
 
 .TimePickerPopup {
-  ::-webkit-scrollbar {
-    width: 0px;
-    background: transparent;
-  }
+  scrollbar-width: 0;
 }

stylesheets/components/ShortcutGuide.scss

@@ -24,10 +24,6 @@
   @include mixins.dark-theme {
     color: variables.$color-gray-05;
     background-color: variables.$color-gray-75;
-
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid variables.$color-gray-75;
-    }
   }
 }
 

stylesheets/components/Stories.scss

@@ -101,13 +101,14 @@
     }
 
     &__list {
-      @include mixins.NavTabs__Scroller;
       display: flex;
       flex-direction: column;
       flex: 1;
-      overflow-y: overlay;
+      overflow-y: auto;
       padding-inline: 16px;
 
+      @include mixins.scrollbar-on-hover;
+
       &--empty {
         @include mixins.font-body-1;
         align-items: center;