Style the left pane scrollbar

stylesheets/_modules.scss

@@ -5746,6 +5746,23 @@ button.module-image__border-overlay:focus {
 // Module: conversation list
 
 .module-conversation-list {
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    visibility: hidden;
+    width: 6px;
+
+    @include light-theme {
+      background: $color-black-alpha-40;
+    }
+    @include dark-theme {
+      background: $color-white-alpha-40;
+    }
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
+  }
+
   &--scroll-behavior {
     &-default {
       @include smooth-scroll;

stylesheets/components/Preferences.scss

@@ -112,7 +112,7 @@
 
   &__settings-pane {
     height: 100vh;
-    overflow: scroll;
+    overflow: overlay;
     width: 100%;
 
     &::-webkit-scrollbar-corner {

ts/components/ConversationList.tsx

@@ -337,7 +337,7 @@ export const ConversationList: React.FC<PropsType> = ({
       rowHeight={calculateRowHeight}
       rowRenderer={renderRow}
       scrollToIndex={scrollToRowIndex}
-      style={{ overflow: scrollable ? 'auto' : 'hidden' }}
+      style={{ overflow: scrollable ? 'overlay' : 'hidden' }}
       tabIndex={-1}
       width={width}
     />