From 305a5bbf8312e94a88ac648e5b361da14fbb0a64 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Tue, 14 May 2024 12:25:11 -0500
Subject: [PATCH] Center chat list icons at narrow width; use rounded
 scrollbars

Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
---
 stylesheets/_global.scss  |  2 ++
 stylesheets/_mixins.scss  |  2 ++
 stylesheets/_modules.scss | 13 ++++---------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 86765059b7..d0f5caf391 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -85,6 +85,8 @@ textarea {
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+
   @include light-theme {
     background: $color-gray-25;
     border: 2px solid $color-white;
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index 6c27ecce85..2f5da57af6 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -868,9 +868,11 @@ $rtl-icon-map: (
   @include scrollbar;
   &::-webkit-scrollbar-thumb {
     @include light-theme {
+      background: $color-gray-25;
       border-color: $color-gray-04;
     }
     @include dark-theme {
+      background: $color-gray-45;
       border-color: $color-gray-80;
     }
   }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 82cbeccd76..6d7ca88ee0 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -4574,8 +4574,11 @@ button.module-image__border-overlay:focus {
     padding-inline: 0;
   }
 
+  // Center chat list icons in narrow mode by reserving scrollbar space, preventing
+  // scrollbar from pushing content
   &--width-narrow {
-    padding-inline: 10px;
+    padding-inline: 10px 1px;
+    scrollbar-gutter: stable;
   }
 
   &__item {
@@ -4688,10 +4691,6 @@ button.module-image__border-overlay:focus {
       user-select: none;
       width: 100%;
 
-      .module-conversation-list--width-narrow & {
-        padding-inline: 14px 0;
-      }
-
       #{$unread-indicator} {
         $size: 18px;
         height: $size;
@@ -4836,10 +4835,6 @@ button.module-image__border-overlay:focus {
         align-items: stretch;
         overflow: hidden;
 
-        .module-conversation-list--width-narrow & {
-          margin-inline-start: 0;
-        }
-
         &--disabled {
           opacity: 0.5;
         }