fix: chat "scrolling up" upon reaction

...resulting in new messages not getting scrolled into view
when they arrive.

This simply removes height changes between messages with / without
a reaction.

Closes #3753

CHANGELOG.md

@@ -26,6 +26,7 @@
 - fix: wrong translation string for new group creation #4126
 - fix: packaging: windows 64bit and 32bit releases now have different filenames, bring back 64bit windows releases. #4131
 - some shortcuts (e.g. `Ctrl + N`, `Ctrl + K`) not working on some languages' keyboard layots #4140
+- fix chat "scrolling up" when someone adds a reaction, resulting in new messages not getting scrolled into view when they arrive #4120
 
 <a id="1_46_8"></a>
 

packages/frontend/src/components/Reactions/styles.module.scss

@@ -2,7 +2,8 @@
   cursor: pointer;
   margin-right: 10px;
   position: relative;
-  top: 20px;
+  line-height: 1; // So that it doesn't change the message height.
+  top: 16px;
 }
 
 .emoji {

packages/frontend/src/components/message/styles.module.scss

@@ -1,17 +1,23 @@
-$reaction-transition-duration: 100ms;
+// $reaction-transition-duration: 100ms;
 
 .message {
-  transition: margin-bottom ease-out $reaction-transition-duration;
-  &.withReactions {
-    margin-bottom: 10px;
-  }
+  // Commented-out for now because of
+  // https://github.com/deltachat/deltachat-desktop/issues/3753
+  // (i.e. adding a reaction would change the height of the message,
+  // which would make the chat "scroll up", and so new messages would not
+  // get automatically scrolled into view).
+  //
+  // transition: margin-bottom ease-out $reaction-transition-duration;
+  // &.withReactions {
+  //   margin-bottom: 10px;
+  // }
 }
 
 .messageFooter {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
-  transition: margin-bottom ease-out $reaction-transition-duration;
+  // transition: margin-bottom ease-out $reaction-transition-duration;
 
   &.onlyMedia {
     bottom: 0;
@@ -21,9 +27,9 @@ $reaction-transition-duration: 100ms;
     right: 0;
   }
 
-  &.withReactionsNoText {
-    margin-bottom: 10px;
-  }
+  // &.withReactionsNoText {
+  //   margin-bottom: 10px;
+  // }
 }
 
 .startWebxdcButton {