From 2706f14456ab78cbcef92af4654e6026b94e6582 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 6 Jul 2022 10:16:24 +0000
Subject: [PATCH] Remove 100% min-width hack from
 mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] (#8992)

---
 .../elements/_GenericEventListSummary.scss    |  7 +++---
 res/css/views/rooms/_EventBubbleTile.scss     | 24 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss
index 243506a447..a3bbd13663 100644
--- a/res/css/views/elements/_GenericEventListSummary.scss
+++ b/res/css/views/elements/_GenericEventListSummary.scss
@@ -43,8 +43,8 @@ limitations under the License.
         &[data-expanded=false] {
             display: flex;
             align-items: center;
-            justify-content: flex-start;
-            padding: 0 49px; // Align with left edge of bubble tiles
+            justify-content: space-between;
+            column-gap: 5px;
         }
 
         // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
@@ -68,15 +68,14 @@ limitations under the License.
 
         .mx_GenericEventListSummary_toggle {
             margin-block: 0;
-            margin-inline-end: 55px;
 
             &[aria-expanded=false] {
                 order: 9;
-                margin-inline-start: 5px;
             }
 
             &[aria-expanded=true] {
                 margin-inline-start: auto; // reduce clickable area
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
             }
         }
 
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 21fcdf0075..9e87412ca5 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -28,12 +28,16 @@ limitations under the License.
     --gutterSize: 11px;
     --cornerRadius: 12px;
     --maxWidth: 70%;
-    margin-right: 60px;
+
+    // For both event tile and event list summary
+    --EventTile_bubble-margin-inline-start: 49px;
+    --EventTile_bubble-margin-inline-end: 60px;
+
+    margin-inline-start: var(--EventTile_bubble-margin-inline-start);
+    margin-inline-end: var(--EventTile_bubble-margin-inline-end);
 }
 
 .mx_EventTile[data-layout=bubble] {
-    --EventTile_bubble-margin-inline-start: 49px;
-    --EventTile_bubble-margin-inline-end: 60px;
     --EventTile_bubble_line-margin-inline-start: -9px;
     --EventTile_bubble_line-margin-inline-end: -12px;
     --EventTile_bubble_gap-inline: 5px;
@@ -579,6 +583,13 @@ limitations under the License.
     display: flex;
     align-items: center;
     justify-content: flex-start;
+
+    .mx_EventTile_line,
+    .mx_EventTile_info {
+        min-width: 100%;
+        // Preserve alignment with left edge of text in bubbles
+        margin: 0;
+    }
 }
 
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
@@ -594,13 +605,6 @@ limitations under the License.
         margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event
     }
 
-    .mx_EventTile_line,
-    .mx_EventTile_info {
-        min-width: 100%;
-        // Preserve alignment with left edge of text in bubbles
-        margin: 0;
-    }
-
     .mx_EventTile_e2eIcon {
         margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here
         align-self: center;