From b50060bcfcd0a4d27bee458ae89cb76ba8f79ccd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 19 Jan 2022 01:48:07 +0000
Subject: [PATCH] Fix MAB overlapping or overflowing in bubbles layout and
 threads regressions (#7569)

* Fix MAB overlapping or overflowing in bubbles layout

* Fix bubbles in threads timestamps positioning regression
---
 res/css/views/rooms/_EventBubbleTile.scss | 34 +++++++++++++++--------
 res/css/views/rooms/_EventTile.scss       |  6 ++++
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index f4d0e39139f..5b187975274 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;
     }
 
@@ -194,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;
@@ -223,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%;
@@ -338,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;
                 }
             }
@@ -439,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;
+            }
         }
     }
 }
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] {