improvement: improve jumpToMessage scrolling

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

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

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 {

packages/frontend/src/components/message/MessageList.tsx

@@ -333,7 +333,16 @@ export default function MessageList({ accountId, chat, refComposer }: Props) {
         )
       }
 
-      domElement.scrollIntoView()
+      domElement.scrollIntoView({
+        // behavior:
+        // "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 + Up shortcut,
+        // or when highlighting the reply that is already in view.
+        block: 'nearest',
+        inline: 'nearest',
+      })
 
       if (scrollTo.highlight === true) {
         // Trigger highlight animation