From 6f851108be363eb675070dc101702558aa1a3d08 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 16 May 2022 15:44:05 +0000
Subject: [PATCH] Fix position of the message action bar on left side bubbles
 (#8398)

* Fix position of the message action bar on data-self=false bubble

- Fix position of the bar on GenericEventListSummary as well
- Override default value `right: 8px` of MessageActionBar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables for MessageActionBar

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set the right property to [data-self=true]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove space for "React" and "Reply" buttons inside MessageActionBar on the left side bubble inside ThreadView

This commit removes space reserved for those buttons on deleted or "Unable to decrypt" message bubble inside ThreadView.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/messages/_MessageActionBar.scss |  9 ++++++---
 res/css/views/rooms/_EventBubbleTile.scss     | 10 ++++++++--
 res/css/views/rooms/_EventTile.scss           |  6 ------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
index e270a8512f..030b0d92c4 100644
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@@ -16,11 +16,14 @@ limitations under the License.
 */
 
 .mx_MessageActionBar {
+    --MessageActionBar-size-button: 28px;
+    --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
+
     position: absolute;
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: 32px;
+    height: var(--MessageActionBar-size-box);
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
@@ -64,8 +67,8 @@ limitations under the License.
 }
 
 .mx_MessageActionBar_maskButton {
-    width: 28px;
-    height: 28px;
+    width: var(--MessageActionBar-size-button);
+    height: var(--MessageActionBar-size-button);
 
     &:disabled,
     &[disabled] {
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 36488c7448..bbc4d3c53f 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -130,7 +130,6 @@ limitations under the License.
 
     .mx_MessageActionBar {
         top: -28px;
-        right: 0;
         z-index: 9; // above the avatar
     }
 
@@ -171,7 +170,8 @@ limitations under the License.
         }
 
         .mx_MessageActionBar {
-            right: -100px; // to make sure it doesn't overflow to the left or cover sender profile
+            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
+            right: initial; // Reset the default value
         }
 
         .mx_ThreadSummary {
@@ -225,6 +225,7 @@ limitations under the License.
                 order: -1;
             }
         }
+
         .mx_EventTile_avatar {
             top: -19px; // height of the sender block
             right: -35px;
@@ -234,6 +235,10 @@ limitations under the License.
             background: $eventbubble-self-bg;
         }
 
+        .mx_MessageActionBar {
+            inset-inline-end: 0;
+        }
+
         --backgroundColor: $eventbubble-self-bg;
     }
 
@@ -620,6 +625,7 @@ limitations under the License.
         margin-right: 0;
 
         .mx_MessageActionBar {
+            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
             right: 48px; // align with that of right-column bubbles
         }
 
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ad157b4c36..1491631059 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -900,12 +900,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 margin: 0 -13px 0 0; // align with normal messages
             }
         }
-
-        &[data-self=false] {
-            .mx_MessageActionBar {
-                right: -60px; // smaller overlap, otherwise it'll overflow on the right
-            }
-        }
     }
 
     .mx_EventTile[data-layout=group] {