From 484592891a4ae9b609274cba11eb62a981a45d4c Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Fri, 5 Apr 2024 17:09:40 +0400
Subject: [PATCH] style: add CSS transition for adding reaction

This doesn't add width transition for narrow messages though.
---
 CHANGELOG.md                                       | 1 +
 src/renderer/components/message/styles.module.scss | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3d5cd85b3..4b76f3bfd5 100644
--- 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
index b3500f92bb..5f9d7667b9 100644
--- 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;
   }