Fix alignment between ELS and Events in bubble layout (#7392)

* Fix alignment between ELS and Events in bubble layout * Improve ELS behaviour in bubble layout
matrix-org · Dec 16, 2021 · 4a9173a · 4a9173a
1 parent 9a82654
commit 4a9173a
Showing 1 changed file with 24 additions and 23 deletions.
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -20,13 +20,13 @@ limitations under the License.
     --gutterSize: 11px;
     --cornerRadius: 12px;
     --maxWidth: 70%;
+    margin-right: 100px;
 }
 
 .mx_EventTile[data-layout=bubble] {
     position: relative;
     margin-top: var(--gutterSize);
     margin-left: 49px;
-    margin-right: 100px;
     font-size: $font-14px;
 
     .mx_ThreadInfo {
@@ -356,14 +356,24 @@ limitations under the License.
 .mx_EventListSummary[data-layout=bubble] {
     --maxWidth: 70%;
     margin-left: calc(var(--avatarSize) + var(--gutterSize));
-    margin-right: 94px;
+
     .mx_EventListSummary_toggle {
+        margin: 0 55px 0 5px;
         float: none;
-        margin: 0;
-        order: 9;
-        margin-left: 5px;
-        margin-right: 55px;
+
+        &[aria-expanded=false] {
+            order: 9;
+        }
+        &[aria-expanded=true] {
+            text-align: right;
+            margin-right: 100px;
+        }
     }
+
+    .mx_EventListSummary_line {
+        display: none;
+    }
+
     .mx_EventListSummary_avatars {
         padding-top: 0;
     }
@@ -372,30 +382,21 @@ limitations under the License.
         content: "";
         clear: both;
     }
-
-    .mx_EventTile {
-        margin: 0 6px;
-        padding: 2px 0;
-    }
-
-    .mx_EventTile_line {
-        margin: 0;
-        > a {
-            // Align timestamps with those of normal bubble tiles
-            left: -76px;
-        }
-    }
-
-    .mx_MessageActionBar {
-        transform: translate3d(90%, 0, 0);
-    }
 }
 
 .mx_EventListSummary[data-expanded=false][data-layout=bubble] {
     // Align with left edge of bubble tiles
     padding: 0 49px;
 }
 
+.mx_EventListSummary[data-expanded=true][data-layout=bubble] {
+    display: contents;
+
+    .mx_EventTile {
+        padding: 2px 0;
+    }
+}
+
 /* events that do not require bubble layout */
 .mx_EventListSummary[data-layout=bubble],
 .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {