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

@@ -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,16 +448,19 @@ limitations under the License.
         margin-left: 9px;
     }
 
-    .mx_EventTile_line > a { // timestamp wrapper anchor
+    .mx_EventTile_line {
+        > a, // timestamp wrapper anchor
+        .mx_MessageActionBar + .mx_MessageTimestamp {
             right: auto;
             left: -77px;
             bottom: unset;
             align-self: center;
 
-        .mx_MessageTimestamp {
+            .mx_MessageTimestamp, &.mx_MessageTimestamp {
                 vertical-align: middle;
             }
         }
+    }
 }
 
 .mx_EventListSummary[data-layout=bubble] {

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] {