From 2dcb34c1838a4e2b2ac7d79b28ff7ddb0d5baf7a Mon Sep 17 00:00:00 2001
From: WofWca <wofwca@protonmail.com>
Date: Tue, 22 Oct 2024 15:10:22 +0400
Subject: [PATCH] style: ugly reactions positioning on image msgs

Closes https://github.com/deltachat/deltachat-desktop/issues/4235

The issue probably existed ever since the reactions were added
in the first place https://github.com/deltachat/deltachat-desktop/pull/2964,
but it got worse after the removal of margin addition
when adding a reaction (60e52c772d788b1b5399b38b438630b90b120f7a).

This commit should make things simpler
because all positioning-related stuff
is only done in `message/styles.module.scss`.
---
 CHANGELOG.md                                                | 1 +
 packages/frontend/scss/message/_metadata.scss               | 4 ----
 packages/frontend/src/components/message/styles.module.scss | 4 ++--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad632081c5..1b3f7dbba7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,7 @@
 - improve accessibility a little #4133
 - fix "Mark All As Read" in account menu mark also archived chats as read
 - use authname instead of displayname for vcard filename #4233
+- ugly positioning of reactions on image-only messages #4237
 
 
 <a id="1_46_8"></a>
diff --git a/packages/frontend/scss/message/_metadata.scss b/packages/frontend/scss/message/_metadata.scss
index e0a40793e5..62988311a1 100644
--- a/packages/frontend/scss/message/_metadata.scss
+++ b/packages/frontend/scss/message/_metadata.scss
@@ -7,10 +7,6 @@
   margin-bottom: -3px;
 
   &.with-image-no-caption {
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-    float: right;
     padding: 4px 10px 1px 10px;
     margin: 0;
     background-color: #0000008f;
diff --git a/packages/frontend/src/components/message/styles.module.scss b/packages/frontend/src/components/message/styles.module.scss
index 9ef6bafed0..9b500d0c3b 100644
--- a/packages/frontend/src/components/message/styles.module.scss
+++ b/packages/frontend/src/components/message/styles.module.scss
@@ -20,11 +20,11 @@
   // transition: margin-bottom ease-out $reaction-transition-duration;
 
   &.onlyMedia {
-    bottom: 0;
+    bottom: 5px;
     left: 0;
     margin-left: 10px;
     position: absolute;
-    right: 0;
+    right: 5px;
   }
 
   // &.withReactionsNoText {