Remove 100% min-width hack from mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] (#8992)

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
             }
         }
 

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;