From 8cd9014dbffb77f2ed9f3bced0705888ed65a8b4 Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Thu, 10 Oct 2024 21:20:38 +0400
Subject: [PATCH] improvement: improve jumpToMessage scrolling

Don't scroll the message list if the message is already visible.
---
 CHANGELOG.md                                      |  1 +
 packages/frontend/scss/message/_message-list.scss | 15 ++++++++++++++-
 .../src/components/message/MessageList.tsx        | 12 +++++++++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

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