kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Chats: fix jumpy scrollbar
Fixes: https://gitlab.com/soapbox-pub/soapbox/-/issues/1315 Co-authored-by: Alex Gleason <alex@alexgleason.me>environments/review-chats-jump-dfnqgn/deployments/2250
rodzic
87aa965069
commit
c3595ea15b
|
@ -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: close modal when navigating to a different page.
|
||||||
- Modals: fix "View context" button in media modal.
|
- Modals: fix "View context" button in media modal.
|
||||||
- Posts: let unauthenticated users to translate posts if allowed by backend.
|
- Posts: let unauthenticated users to translate posts if allowed by backend.
|
||||||
|
- Chats: fix jumpy scrollbar.
|
||||||
|
|
||||||
## [3.0.0] - 2022-12-25
|
## [3.0.0] - 2022-12-25
|
||||||
|
|
||||||
|
|
|
@ -66,6 +66,21 @@ const List: Components['List'] = React.forwardRef((props, ref) => {
|
||||||
return <div ref={ref} {...rest} className='mb-2' />;
|
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 {
|
interface IChatMessageList {
|
||||||
/** Chat the messages are being rendered from. */
|
/** Chat the messages are being rendered from. */
|
||||||
chat: IChat,
|
chat: IChat,
|
||||||
|
@ -472,6 +487,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
|
||||||
}}
|
}}
|
||||||
components={{
|
components={{
|
||||||
List,
|
List,
|
||||||
|
Scroller,
|
||||||
Header: () => {
|
Header: () => {
|
||||||
if (hasNextPage || isFetchingNextPage) {
|
if (hasNextPage || isFetchingNextPage) {
|
||||||
return <Spinner withText={false} />;
|
return <Spinner withText={false} />;
|
||||||
|
|
|
@ -238,7 +238,7 @@ const ChatPageMain = () => {
|
||||||
|
|
||||||
<div className='h-full overflow-hidden'>
|
<div className='h-full overflow-hidden'>
|
||||||
<Chat
|
<Chat
|
||||||
className='h-full overflow-hidden'
|
className='h-full'
|
||||||
chat={chat}
|
chat={chat}
|
||||||
inputRef={inputRef}
|
inputRef={inputRef}
|
||||||
/>
|
/>
|
||||||
|
|
Ładowanie…
Reference in New Issue