improvement: improve jumpToMessage scrolling (#4204)

Don't scroll the message list if the message is already visible.

Co-authored-by: Simon Laux <[email protected]>

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

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 {

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