Scrollbar styles for participant list

signalapp · Nov 23, 2020 · 7ca063a · 7ca063a
1 parent 6d53cb1
commit 7ca063a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -6572,7 +6572,7 @@ button.module-image__border-overlay:focus {
   color: $color-white;
   margin-right: 12px;
   margin-top: 54px;
-  overflow: scroll;
+  overflow: hidden;
   padding: 14px;
   width: 280px;
   padding-bottom: 0;
@@ -6593,9 +6593,30 @@ button.module-image__border-overlay:focus {
   }
 
   &__list {
-    margin: 0;
+    height: 100%;
+    margin-bottom: 0;
+    margin-left: -14px;
+    margin-right: -14px;
     margin-top: 22px;
-    padding: 0;
+    overflow: scroll;
+    padding-bottom: 24px;
+    padding-left: 14px;
+    padding-right: 14px;
+    padding-top: 0;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: none;
+      border-radius: 4px;
+      background-color: $color-gray-45;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: $color-gray-80;
+    }
   }
 
   &__contact {
@@ -6610,7 +6631,7 @@ button.module-image__border-overlay:focus {
   &__name {
     display: inline-block;
     margin-left: 8px;
-    max-width: 144px;
+    max-width: 130px;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;

diff --git a/ts/components/CallingParticipantsList.stories.tsx b/ts/components/CallingParticipantsList.stories.tsx
@@ -82,3 +82,12 @@ story.add('Many Participants', () => {
   });
   return <CallingParticipantsList {...props} />;
 });
+
+story.add('Overflow', () => {
+  const props = createProps({
+    participants: Array(50)
+      .fill(null)
+      .map(() => createParticipant({ title: 'Kirby' })),
+  });
+  return <CallingParticipantsList {...props} />;
+});