Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725)

* Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Move mx_MatrixChat_useCompactLayout block from _GroupLayout.scss to _EventTile.scss

This block is not related to the group layout.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include EventTile_continuation block in EventTile_emote

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use logical properties for the padding values

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Sort declarations for maintainability

- EventTile_avatar
- EventTile_line
- EventTile_reply

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Separate selectors of .markdown-body

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/structures/_RoomView.scss

@@ -272,6 +272,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

@@ -610,6 +610,86 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        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: 4px;
+            }
+
+            .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-block: 0;
+                }
+            }
+
+            .mx_EventTile_avatar {
+                top: 2px;
+            }
+
+            .mx_EventTile_line,
+            .mx_EventTile_reply {
+                padding-top: 0px;
+                padding-bottom: 1px;
+            }
+        }
+
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
+            padding-block: 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
+            }
+        }
+    }
+}
+
 /* end of overrides */
 
 .mx_EventTile_keyRequestInfo {

res/css/views/rooms/_GroupLayout.scss

@@ -46,85 +46,3 @@ $left-gutter: 64px;
         }
     }
 }
-
-/* 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;
-    }
-}