style: add CSS transition for adding reaction

This doesn't add width transition for narrow messages though.
deltachat · Apr 8, 2024 · 4845928 · 4845928
1 parent 702a9e3
commit 4845928
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Update translations (2024-04-04) #3746
 - minor improvements to "add second device" dialog #3748
 - Remove deprecated translations #3756
+- reactions: add message height animation #3752
 
 ### Fixed
 - fix chat audit dialog was going out of viewport on smaller screens #3736

diff --git a/src/renderer/components/message/styles.module.scss b/src/renderer/components/message/styles.module.scss
@@ -1,7 +1,10 @@
+$reaction-transition-duration: 100ms;
+
 .message {
   &.withReactions {
     margin-bottom: 10px;
   }
+  transition: margin-bottom ease-out $reaction-transition-duration;
 }
 
 .messageFooter {
@@ -17,6 +20,7 @@
     right: 0;
   }
 
+  transition: margin-bottom ease-out $reaction-transition-duration;
   &.withReactionsNoText {
     margin-bottom: 10px;
   }