Include mx_RoomView_timeline_rr_enabled style rules in mx_EventTile[d…

…ata-layout=group] (#8986)

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;