Skip to content

Commit

Permalink
fix: reaction list is now scrollable (#265)
Browse files Browse the repository at this point in the history
### 🎯 Goal

This PR affects both Angular and React

This is an old bug, but we probably didn't notice it because it requires
lots of reactions + very narrow device: but the reaction list above the
message bubble could overflow.

### 🛠 Implementation details

This PR adds scrolling to the reaction list

A room for improvement: the reaction list could fill the whole width of
the message list (see screenshots for visual explanation), this is
currently not happening due to our CSS/HTML structure. Since this is not
an easy fix, I'll leave this to our future selves.

### 🎨 UI Changes

Before:
![Screenshot 2024-01-31 at 16 20
06](https://github.com/GetStream/stream-chat-css/assets/6690098/264d693b-a6fc-401b-9e32-29d346b2f1d3)

After:
![Screenshot 2024-01-31 at 16 24
00](https://github.com/GetStream/stream-chat-css/assets/6690098/5974ab99-6061-4dd1-9a26-04d5f1209c66)



Make sure to test with both Angular and React (with both `MessageList`
and `VirtualizedMessageList` components) SDKs
  • Loading branch information
szuperaz authored Feb 1, 2024
1 parent 9641f40 commit de3ba43
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/v2/styles/MessageReactions/MessageReactions-layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
display: flex;

.str-chat__message-reactions {
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: none;
list-style: none;
display: flex;
margin-block-start: var(--str-chat__spacing-0_5);
Expand Down

0 comments on commit de3ba43

Please sign in to comment.