From afcf6ced052b74df0a5d85c0bb6518f42a0846eb Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 6 Jul 2022 06:42:30 +0000
Subject: [PATCH] Include mx_RoomView_timeline_rr_enabled style rules in
 mx_EventTile[data-layout=group] (#8986)

---
 res/css/views/rooms/_EventTile.scss | 36 ++++++++++++++---------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a0489d6b38..4fc28d0bce 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -241,6 +241,23 @@ $left-gutter: 64px;
             z-index: 9;
         }
 
+        .mx_RoomView_timeline_rr_enabled & {
+            $inline-end-margin: 80px; // TODO: Use a spacing variable
+
+            .mx_ThreadSummary,
+            .mx_ThreadSummary_icon,
+            .mx_EventTile_line {
+                margin-right: $inline-end-margin;
+                min-height: $font-14px;
+            }
+
+            .mx_ThreadSummary {
+                max-width: min(calc(100% - $left-gutter - $inline-end-margin), 600px); // leave space on both left & right gutters
+            }
+
+            // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
+        }
+
         &.mx_EventTile_continuation {
             padding-top: 0px !important;
         }
@@ -484,25 +501,6 @@ $left-gutter: 64px;
     }
 }
 
-.mx_RoomView_timeline_rr_enabled {
-    .mx_EventTile[data-layout=group] {
-
-        .mx_ThreadSummary,
-        .mx_ThreadSummary_icon,
-        .mx_EventTile_line {
-            /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-            margin-right: 80px;
-            min-height: $font-14px;
-        }
-
-        .mx_ThreadSummary {
-            max-width: min(calc(100% - $left-gutter - 80px), 600px); // leave space on both left & right gutters
-        }
-    }
-
-    // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
-}
-
 .mx_EventTile_bigEmoji {
     font-size: 48px;
     line-height: 57px;