Fix MAB overlapping or overflowing in bubbles layout and threads regr…

…essions (#7569) * Fix MAB overlapping or overflowing in bubbles layout * Fix bubbles in threads timestamps positioning regression
matrix-org · Jan 19, 2022 · b50060b · b50060b
1 parent 1d45921
commit b50060b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 11 deletions.
diff --git 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
@@ -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] {