From 12192b030a5ec79baecdc74c8ead247f503b956b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 18 Jan 2022 12:15:43 +0000
Subject: [PATCH 1/2] Fix MAB overlapping or overflowing in bubbles layout

---
 res/css/views/rooms/_EventBubbleTile.scss | 4 ++++
 res/css/views/rooms/_EventTile.scss       | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index f4d0e39139f..e63cb540916 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -131,6 +131,10 @@ limitations under the License.
             left: -34px;
         }
 
+        .mx_MessageActionBar {
+            right: -100px; // to make sure it doesn't overflow to the left or cover sender profile
+        }
+
         --backgroundColor: $eventbubble-others-bg;
     }
 
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 4bb171044d1..87afb4734a4 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -911,6 +911,12 @@ $left-gutter: 64px;
                 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] {

From 7604842c379ad501e485c7b9c8b284a3fb9eec8f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 18 Jan 2022 12:16:00 +0000
Subject: [PATCH 2/2] Fix bubbles in threads timestamps positioning regression

---
 res/css/views/rooms/_EventBubbleTile.scss | 30 ++++++++++++++---------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index e63cb540916..5b187975274 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -198,7 +198,10 @@ limitations under the License.
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
 
-        > a { // timestamp wrapper anchor
+        // the selector here is quite weird because timestamps can appear linked & unlinked and in different places
+        // in the DOM depending on the specific rendering context
+        > a, // timestamp wrapper anchor
+        .mx_MessageActionBar + .mx_MessageTimestamp {
             position: absolute;
             padding: 4px 8px;
             bottom: 0;
@@ -227,7 +230,8 @@ limitations under the License.
         }
 
         &.mx_EventTile_sticker {
-            > a {
+            > a, // timestamp wrapper anchor
+            .mx_MessageActionBar + .mx_MessageTimestamp {
                 // position timestamps for stickers to the right of the un-bubbled sticker
                 right: unset;
                 left: 100%;
@@ -342,7 +346,8 @@ limitations under the License.
             .mx_EventTile_reply {
                 max-width: 90%;
                 padding: 0;
-                > a {
+                > a, // timestamp wrapper anchor
+                .mx_MessageActionBar + .mx_MessageTimestamp {
                     display: none !important;
                 }
             }
@@ -443,14 +448,17 @@ limitations under the License.
         margin-left: 9px;
     }
 
-    .mx_EventTile_line > a { // timestamp wrapper anchor
-        right: auto;
-        left: -77px;
-        bottom: unset;
-        align-self: center;
-
-        .mx_MessageTimestamp {
-            vertical-align: middle;
+    .mx_EventTile_line {
+        > a, // timestamp wrapper anchor
+        .mx_MessageActionBar + .mx_MessageTimestamp {
+            right: auto;
+            left: -77px;
+            bottom: unset;
+            align-self: center;
+
+            .mx_MessageTimestamp, &.mx_MessageTimestamp {
+                vertical-align: middle;
+            }
         }
     }
 }