fix: reaction list is now scrollable

[szuperaz]

🎯 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:

After:

Make sure to test with both Angular and React (with both MessageList and VirtualizedMessageList components) SDKs

[myandrienko]

Do we need to make some accommodations for Windows, where scroll bars are always visible and occupy additional space?

[myandrienko]

Yep, it looks a bit weird on Windows:

[szuperaz]

hm, I thought the scrollbar is only visible on windows if the content needs scrolling, but it looks like it's there even if there is no need for the scroll?

[szuperaz]

This is the definition for auto: Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike scroll, user agents display scroll bars only if the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with visible, but still establishes a new block-formatting context. Desktop browsers provide scroll bars if content overflows. Does it work differently on windows?

[szuperaz]

I did a test in windows and this is what I'm seeing:

UI when the reaction list fits the available space - no scrollbar here

UI when the reaction list doesn't fit the screen - before the fix, overflow

UI when the reaction list doesn't fit the screen - after the fix, scrollbar

I agree that the scrollbar doesn't look nice, and if you have an easy to implement idea, I'm happy to change my fix. But if we don't have that, I think we should apply that fix, because it's better to have an ugly scrollbar, than an overflow.

[myandrienko]

I agree that some scrollbar is better than no scrollbar :) In my screenshot there are actually additional reactions overflowing the container, that's why the scrollbar is visible.

Here's a usual way deal to deal with visible scrollbars:

/* On the reactions list container, hide all overflow */
.str-chat__message-reactions-container {
  overflow: hidden;
}

.str-chat__message-reactions {
  overflow-x: scroll;
  overflow-y: hidden;

  /* On the reactions list, give it some additional height.
     Normally the height is 28px, let's make it 56px */
  height: 56px;
  box-sizing: border-box;
  align-items: start; /* prevent reactions from stretching to 56px height */

  /* Hide all "additional" hide, including a scrollbar,
     in parent's overflow */
  margin-bottom: -28px;
}

This way even when the scrollbar is displayed, it stays hidden in its parent overflow.

[szuperaz]

Agreed with @myandrienko to merge this as is, and then talk through with the team if we want the secondary fix, and implement it in a follow-up PR.

[szuperaz]

Thank you @myandrienko for the idea https://caniuse.com/?search=scrollbar-width

[github-actions]

🎉 This PR is included in version 4.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀