From c3595ea15becc4b108ada136a383e285dedd9128 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 11 Jan 2023 11:13:56 -0500
Subject: [PATCH] Chats: fix jumpy scrollbar

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

Co-authored-by: Alex Gleason <alex@alexgleason.me>
---
 CHANGELOG.md                                     |  1 +
 .../chats/components/chat-message-list.tsx       | 16 ++++++++++++++++
 .../chat-page/components/chat-page-main.tsx      |  2 +-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab6a4c244..515af91ea 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 4b5098a7d..cdf032178 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/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} />;
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 638a7fea1..4af6b0240 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/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}
         />