Tidy up styles on _EventTile.scss (#8882)

* Tidy up styles

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

* Tidy up styles

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

* Include in mx_EventTile_body pre

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

* Include in mx_EventTile_line

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

* Use spacing variables

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

res/css/views/rooms/_EventTile.scss

@@ -243,11 +243,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         padding-left: 2px;
         padding-right: 2px;
         cursor: pointer;
-    }
 
-    .mx_EventTile_searchHighlight a {
+        a {
-        background-color: $accent;
+            background-color: $accent;
-        color: $accent-fg-color;
+            color: $accent-fg-color;
+        }
     }
 
     &.mx_EventTile_contextual {
@@ -264,10 +264,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
            Replaces margin-top: -6px. This interacts better with a read
            marker being in between. Content overflows. */
         height: 1px;
-    }
 
-    .mx_EventTile_msgOption a {
+        a {
-        text-decoration: none;
+            text-decoration: none;
+        }
     }
 
     /* De-zalgoing */
@@ -538,8 +538,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
-/* Various markdown overrides */
-
 .mx_EventTile_body {
     a:hover {
         text-decoration: underline;
@@ -547,6 +545,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
     pre {
         border: 1px solid transparent;
+
+        .mx_EventTile:hover &,
+        .mx_EventTile.focus-visible:focus-within & {
+            border: 1px solid $tertiary-content;
+        }
     }
 
     // selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity
@@ -554,16 +557,50 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         object-fit: contain;
         object-position: left top;
     }
-}
 
-.mx_EventTile_clamp {
+    .mx_EventTile_clamp & {
-    .mx_EventTile_body {
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
     }
+
+    .mx_EventTile_pre_container {
+        // For correct positioning of _copyButton (See TextualBody)
+        position: relative;
+
+        &:focus-within,
+        &:hover {
+            .mx_EventTile_button {
+                visibility: visible;
+            }
+        }
+
+        .mx_EventTile_collapsedCodeBlock {
+            max-height: 30vh;
+        }
+
+        // Inserted adjacent to <pre> blocks, (See TextualBody)
+        .mx_EventTile_button {
+            position: absolute;
+            top: $spacing-8;
+            right: $spacing-8;
+            width: 19px;
+            height: 19px;
+            visibility: hidden;
+            background-color: $message-action-bar-fg-color;
+
+            &.mx_EventTile_buttonBottom {
+                top: 33px;
+            }
+
+            &.mx_EventTile_collapseButton,
+            &.mx_EventTile_expandButton {
+                mask-size: 75%;
+            }
+        }
+    }
 }
 
 .mx_EventTile_lineNumbers {
@@ -578,11 +615,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 }
 
-.mx_EventTile:hover .mx_EventTile_body pre,
-.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
-    border: 1px solid $tertiary-content;
-}
-
 .mx_EventTile_button {
     display: inline-block;
     cursor: pointer;
@@ -606,44 +638,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 }
 
-.mx_EventTile_body .mx_EventTile_pre_container {
-    // For correct positioning of _copyButton (See TextualBody)
-    position: relative;
-
-    &:focus-within,
-    &:hover {
-        .mx_EventTile_button {
-            visibility: visible;
-        }
-    }
-
-    .mx_EventTile_collapsedCodeBlock {
-        max-height: 30vh;
-    }
-
-    // Inserted adjacent to <pre> blocks, (See TextualBody)
-    .mx_EventTile_button {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        width: 19px;
-        height: 19px;
-        visibility: hidden;
-        background-color: $message-action-bar-fg-color;
-
-        &.mx_EventTile_buttonBottom {
-            top: 33px;
-        }
-
-        &.mx_EventTile_collapseButton,
-        &.mx_EventTile_expandButton {
-            mask-size: 75%;
-        }
-    }
-}
-
-/* end of overrides */
-
 .mx_EventTile_keyRequestInfo {
     font-size: $font-12px;
 
@@ -685,10 +679,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     .mx_EventTile_line {
         padding-left: 0;
         margin-right: 0;
-    }
 
-    .mx_EventTile_line span {
+        span {
-        padding: 4px 8px;
+            padding: $spacing-4 $spacing-8;
+        }
     }
 
     a {