From 9a07f69f142b2694585e4a8d241e854ed734f53d Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Sat, 5 Oct 2024 18:11:55 +0400
Subject: [PATCH] style: hide reactions instead of wrapping

on narrower screens.
---
 CHANGELOG.md                                  |  1 +
 .../src/components/Reactions/index.tsx        |  8 +++--
 .../components/Reactions/styles.module.scss   | 31 +++++++++++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e146542d55..6f5ad947a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@
 - fix: exit search when clicking on profile when the selected profile is already the selected account #4166
 - "Encryption Info" dialog showing all info in one line #4162
 - losing scrolling "momentum" while scrolling the messages list fast #4122
+- reactions wrapping in an ugly way on narrower window size
 
 <a id="1_46_8"></a>
 
diff --git a/packages/frontend/src/components/Reactions/index.tsx b/packages/frontend/src/components/Reactions/index.tsx
index 2016640482..d4ac539678 100644
--- a/packages/frontend/src/components/Reactions/index.tsx
+++ b/packages/frontend/src/components/Reactions/index.tsx
@@ -41,8 +41,12 @@ export default function Reactions(props: Props) {
               })}
               key={emoji}
             >
-              {emoji}
-              {count > 1 && <span className={styles.emojiCount}>{count}</span>}
+              <span>
+                {emoji}
+                {count > 1 && (
+                  <span className={styles.emojiCount}>{count}</span>
+                )}
+              </span>
             </span>
           )
         })}
diff --git a/packages/frontend/src/components/Reactions/styles.module.scss b/packages/frontend/src/components/Reactions/styles.module.scss
index a7c3350841..372d61fb9c 100644
--- a/packages/frontend/src/components/Reactions/styles.module.scss
+++ b/packages/frontend/src/components/Reactions/styles.module.scss
@@ -1,17 +1,44 @@
+$reaction-font-size: 16px;
+$reaction-row-height: 25px;
 .reactions {
   cursor: pointer;
   margin-right: 10px;
   position: relative;
-  line-height: 1; // So that it doesn't change the message height.
   top: 16px;
+  // In case the parent element is vertically taller than this element.
+  align-self: flex-end;
+  // Ensure that the reactions element doesn't change the height of a message,
+  // so that the message list doesn't get "scrolled up".
+  // See https://github.com/deltachat/deltachat-desktop/issues/3753
+  //
+  // The actual value of `margin-top` doesn't matter, it could be
+  // -9999px as well.
+  margin-top: -16px;
+  // Make space for the "sent at" element - don't make it wrap.
+  flex-shrink: 999999999999999;
+  // In case the parent is vertically taller than this element.
+  align-self: flex-end;
+
+  display: flex;
+  // In case the screen in so narrow that we can't even show
+  // 5 emojis (SHOW_MAX_DIFFERENT_EMOJIS).
+  // Let's wrap and hide them.
+  // See https://stackoverflow.com/questions/43547430/how-can-i-completely-hide-elements-that-overflow-their-container-vertically
+  flex-wrap: wrap;
+  overflow: hidden;
+  height: $reaction-row-height;
 }
 
 .emoji {
   background-color: var(--messageIncomingBg);
   border-radius: 24px;
   border: solid 1px rgba(100, 100, 100, 0.3);
-  font-size: 16px;
+  font-size: $reaction-font-size;
+  line-height: 1;
   padding: 2px 6px;
+  display: flex;
+  align-items: center;
+  height: $reaction-row-height;
 
   & ~ & {
     margin-left: 2px;