diff --git a/CHANGELOG.md b/CHANGELOG.md index c352d80f86..ad632081c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,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 - replace BlueprintJS Button, Icon, Radio, RadioGroup, Collapse, Dialog with our implementation #4006, #4226 - Update `@deltachat/stdio-rpc-server` and `deltachat/jsonrpc-client` to `1.147.1` - Update proxy configuration - a full url can be entered now diff --git a/packages/frontend/scss/message/_message-list.scss b/packages/frontend/scss/message/_message-list.scss index e281015821..7c07b222a8 100644 --- a/packages/frontend/scss/message/_message-list.scss +++ b/packages/frontend/scss/message/_message-list.scss @@ -103,7 +103,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 6bdd2c2c72..da960021a2 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