Chats: fix jumpy scrollbar

Fixes: https://gitlab.com/soapbox-pub/soapbox/-/issues/1315

Co-authored-by: Alex Gleason <alex@alexgleason.me>

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Modals: close modal when navigating to a different page.
 - Modals: fix "View context" button in media modal.
 - Posts: let unauthenticated users to translate posts if allowed by backend.
+- Chats: fix jumpy scrollbar.
 
 ## [3.0.0] - 2022-12-25
 

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -66,6 +66,21 @@ const List: Components['List'] = React.forwardRef((props, ref) => {
   return <div ref={ref} {...rest} className='mb-2' />;
 });
 
+const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => {
+  const { style, context, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      style={{
+        ...style,
+        scrollbarGutter: 'stable',
+      }}
+    />
+  );
+});
+
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
   chat: IChat,
@@ -472,6 +487,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
           }}
           components={{
             List,
+            Scroller,
             Header: () => {
               if (hasNextPage || isFetchingNextPage) {
                 return <Spinner withText={false} />;

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -238,7 +238,7 @@ const ChatPageMain = () => {
 
       <div className='h-full overflow-hidden'>
         <Chat
-          className='h-full overflow-hidden'
+          className='h-full'
           chat={chat}
           inputRef={inputRef}
         />