From 9847c7764f887e41ed977e914ad0cfcce0da6415 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Dec 2021 11:18:50 +0000
Subject: [PATCH 1/2] Fix alignment between ELS and Events in bubble layout

---
 res/css/views/rooms/_EventBubbleTile.scss | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 7e2a1ec45e7..8994d654107 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 {
@@ -352,13 +352,11 @@ limitations under the License.
 .mx_EventListSummary[data-layout=bubble] {
     --maxWidth: 70%;
     margin-left: calc(var(--avatarSize) + var(--gutterSize));
-    margin-right: 94px;
+
     .mx_EventListSummary_toggle {
         float: none;
-        margin: 0;
+        margin: 0 55px 0 5px;
         order: 9;
-        margin-left: 5px;
-        margin-right: 55px;
     }
     .mx_EventListSummary_avatars {
         padding-top: 0;
@@ -370,21 +368,16 @@ limitations under the License.
     }
 
     .mx_EventTile {
-        margin: 0 6px;
+        margin: 0 0 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] {

From 177e41dc4b9d1db1a4c44a14fca50604f8525e87 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Dec 2021 11:40:04 +0000
Subject: [PATCH 2/2] Improve ELS behaviour in bubble layout

---
 res/css/views/rooms/_EventBubbleTile.scss | 36 ++++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 8994d654107..dd3d8f88fba 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -354,10 +354,22 @@ limitations under the License.
     margin-left: calc(var(--avatarSize) + var(--gutterSize));
 
     .mx_EventListSummary_toggle {
-        float: none;
         margin: 0 55px 0 5px;
-        order: 9;
+        float: none;
+
+        &[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;
     }
@@ -366,18 +378,6 @@ limitations under the License.
         content: "";
         clear: both;
     }
-
-    .mx_EventTile {
-        margin: 0 0 0 6px;
-        padding: 2px 0;
-    }
-
-    .mx_EventTile_line {
-        > a {
-            // Align timestamps with those of normal bubble tiles
-            left: -76px;
-        }
-    }
 }
 
 .mx_EventListSummary[data-expanded=false][data-layout=bubble] {
@@ -385,6 +385,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] {