Move EventTile style rules of compact modern layout, enabling it on t…

…he right panel as well (#8766)

res/css/_components.scss

@@ -241,7 +241,6 @@
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventBubbleTile.scss";
 @import "./views/rooms/_EventTile.scss";
-@import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_HistoryTile.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/structures/_RoomView.scss

@@ -278,6 +278,10 @@ hr.mx_RoomView_myReadMarker {
 .mx_MatrixChat_useCompactLayout {
     .mx_RoomView_MessageList {
         margin-bottom: 4px;
+
+        h2 {
+            margin-top: 6px; // TODO: Use a spacing variable
+        }
     }
 
     .mx_RoomView_statusAreaBox {

res/css/views/rooms/_EventTile.scss

@@ -1069,6 +1069,90 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
+// Cascading - compact modern layout on the main timeline and the right panel
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        // Override :not([data-layout="bubble"])
+        &[data-layout=group] {
+            padding-top: $spacing-4;
+
+            &.mx_EventTile_info {
+                padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+                font-size: $font-13px;
+
+                .mx_EventTile_avatar {
+                    top: $spacing-4;
+                }
+
+                .mx_EventTile_line,
+                .mx_EventTile_reply {
+                    line-height: $font-20px;
+                }
+            }
+
+            &.mx_EventTile_emote {
+                padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
+
+                &.mx_EventTile_continuation {
+                    padding-top: 0;
+
+                    .mx_EventTile_line,
+                    .mx_EventTile_reply {
+                        padding-top: 0;
+                        padding-bottom: 0;
+                    }
+                }
+
+                .mx_EventTile_avatar {
+                    top: 2px;
+                }
+
+                .mx_EventTile_line,
+                .mx_EventTile_reply {
+                    padding-top: 0;
+                    padding-bottom: 1px;
+                }
+            }
+
+            .mx_EventTile_avatar {
+                top: 2px;
+            }
+
+            .mx_EventTile_line,
+            .mx_EventTile_reply {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+
+            .mx_EventTile_e2eIcon {
+                top: 3px;
+            }
+
+            .mx_DisambiguatedProfile {
+                font-size: $font-13px;
+            }
+
+            .mx_ReadReceiptGroup {
+                // This aligns the avatar with the last line of the
+                // message. We want to move it one line up - 2rem
+                top: -2rem;
+            }
+
+            .mx_EventTile_content .markdown-body {
+                p,
+                ul,
+                ol,
+                dl,
+                blockquote,
+                pre,
+                table {
+                    margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom
+                }
+            }
+        }
+    }
+}
+
 // Media query for mobile UI
 @media only screen and (max-width: 480px) {
     .mx_EventTile_content {