From 4a9173a7f1568ae55d26954a047d45c95840e8a6 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Dec 2021 18:34:59 +0000
Subject: [PATCH] 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
---
 res/css/views/rooms/_EventBubbleTile.scss | 47 ++++++++++++-----------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index d42339cf646..be90661442d 100644
--- 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,23 +382,6 @@ 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] {
@@ -396,6 +389,14 @@ limitations under the License.
     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] {