Move EventTile style rules of compact modern layout, enabling it on the 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 {

res/css/views/rooms/_GroupLayout.scss

@@ -1,98 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/* Compact layout overrides */
-
-.mx_MatrixChat_useCompactLayout {
-    .mx_EventTile {
-        padding-top: 4px;
-
-        .mx_EventTile_line,
-        .mx_EventTile_reply {
-            padding-top: 0;
-            padding-bottom: 0;
-        }
-
-        &.mx_EventTile_info {
-            // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
-            padding-top: 0px;
-            font-size: $font-13px;
-
-            .mx_EventTile_line,
-            .mx_EventTile_reply {
-                line-height: $font-20px;
-            }
-
-            .mx_EventTile_avatar {
-                top: 4px;
-            }
-        }
-
-        .mx_DisambiguatedProfile {
-            font-size: $font-13px;
-        }
-
-        &.mx_EventTile_emote {
-            // add a bit more space for emotes so that avatars don't collide
-            padding-top: 8px;
-
-            .mx_EventTile_avatar {
-                top: 2px;
-            }
-
-            .mx_EventTile_line,
-            .mx_EventTile_reply {
-                padding-top: 0px;
-                padding-bottom: 1px;
-            }
-        }
-
-        &.mx_EventTile_emote.mx_EventTile_continuation {
-            padding-top: 0;
-
-            .mx_EventTile_line,
-            .mx_EventTile_reply {
-                padding-top: 0px;
-                padding-bottom: 0px;
-            }
-        }
-
-        .mx_EventTile_avatar {
-            top: 2px;
-        }
-
-        .mx_EventTile_e2eIcon {
-            top: 3px;
-        }
-
-        .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: 4px; // 1/4 of the non-compact margin-bottom
-            }
-        }
-    }
-
-    .mx_RoomView_MessageList h2 {
-        margin-top: 6px;
-    }
-}