mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Scrollbar styles for participant list

Browse source
This commit is contained in:
Josh Perez 2020-11-20 12:19:53 -05:00 • committed by Josh Perez
parent 6d53cb1740
commit 7ca063a274
2 changed files with 34 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

29
stylesheets/_modules.scss
View file

@ -6572,7 +6572,7 @@ button.module-image__border-overlay:focus {
color: $color-white; color: $color-white;
margin-right: 12px; margin-right: 12px;
margin-top: 54px; margin-top: 54px;
overflow: scroll; overflow: hidden;
padding: 14px; padding: 14px;
width: 280px; width: 280px;
padding-bottom: 0; padding-bottom: 0;
@ -6593,9 +6593,30 @@ button.module-image__border-overlay:focus {
} }
&__list { &__list {
margin: 0; height: 100%;
margin-bottom: 0;
margin-left: -14px;
margin-right: -14px;
margin-top: 22px; 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 { &__contact {
@ -6610,7 +6631,7 @@ button.module-image__border-overlay:focus {
&__name { &__name {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
max-width: 144px; max-width: 130px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;

9
ts/components/CallingParticipantsList.stories.tsx
View file

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