diff --git a/CHANGELOG.md b/CHANGELOG.md index 98dcc2375..9da03a5d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - Update local help (2024-10-02) #4165 - trim whitepaces when reading from clipboard in qr code reader #4169 - load chat lists faster (the chat list on the main screen, "Forward to..." dialog, etc) +- when jumping to message, don't scroll the message list if the message is already in view #4204 ### Fixed - fix that you can not click header button in dialog when they are on top of the navbar #4093 diff --git a/packages/frontend/scss/message/_message-list.scss b/packages/frontend/scss/message/_message-list.scss index f36cec3d5..d3ab85569 100644 --- a/packages/frontend/scss/message/_message-list.scss +++ b/packages/frontend/scss/message/_message-list.scss @@ -102,7 +102,20 @@ margin: 10px 0px; li { - margin-bottom: 10px; + $margin-bottom: 10px; + margin-bottom: $margin-bottom; + // This is so that when we `scrollIntoView()` the last message + // in the chat, its margin is also scrolled into view. + // Otherwise only the visible part of the message would get scrolled + // into view, resulting in the message list not getting + // scrolled all the way to the bottom, + // resulting in the message list not not getting scrolled to the + // bottom when another message arrives. + scroll-margin-bottom: $margin-bottom; + // And this is purely cosmetic. For scrolling to a message + // that is above the visible area. + scroll-margin-top: $margin-bottom / 2; + min-width: 200px; &::after { diff --git a/packages/frontend/src/components/message/MessageList.tsx b/packages/frontend/src/components/message/MessageList.tsx index 1d24e05e1..7741f013a 100644 --- a/packages/frontend/src/components/message/MessageList.tsx +++ b/packages/frontend/src/components/message/MessageList.tsx @@ -333,7 +333,17 @@ export default function MessageList({ accountId, chat, refComposer }: Props) { ) } - domElement.scrollIntoView() + domElement.scrollIntoView({ + // "nearest" so as to not scroll if the message is already in view. + // Otherwise we'd try to scroll in such a way that the message + // is at the very top of the messages list. + // This would not be nice for the Ctrl + Down shortcut + // (when quoting a message that a bit far up), + // or when highlighting the reply that is already in view. + block: 'nearest', + inline: 'nearest', + // behavior: + }) if (scrollTo.highlight === true) { // Trigger highlight animation