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
; }); +const Scroller: Components['Scroller'] = React.forwardRef((props, ref) => { + const { style, context, ...rest } = props; + + return ( +
+ ); +}); + interface IChatMessageList { /** Chat the messages are being rendered from. */ chat: IChat, @@ -472,6 +487,7 @@ const ChatMessageList: React.FC = ({ chat }) => { }} components={{ List, + Scroller, Header: () => { if (hasNextPage || isFetchingNextPage) { return ; 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 = () => {