Specify spacing around EventTileBubble for each layout (#9001)

* Apply margin to EventTileBubble on each layout

Use a variable to ensure alignment of EventTileBubble on IRC layout

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

* Improve style rules

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

* Apply the same block margin to every layout

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

res/css/views/messages/_EventTileBubble.scss

@@ -16,51 +16,43 @@ limitations under the License.
 
 .mx_EventTileBubble {
     background-color: $dark-panel-bg-color;
-    padding: 10px;
+    padding: 10px; // TODO: Use a spacing variable
     border-radius: 8px;
-    margin: 10px auto;
     // Reserve space for external timestamps, but also cap the width
     max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px);
     box-sizing: border-box;
     display: grid;
     grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
 
-    .mx_EventTile[data-layout=bubble] & {
+    &::before,
-        // Timestamps are inside the tile, so the width can be less constrained
+    &::after {
-        max-width: 600px;
-    }
-
-    &::before, &::after {
         position: relative;
         grid-column: 1;
         grid-row: 1 / 3;
         width: 16px;
         height: 16px;
         content: "";
-        top: 0;
+        inset: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
-        margin-top: 4px;
+        margin-top: $spacing-4;
     }
 
-    .mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
+    .mx_EventTileBubble_title,
+    .mx_EventTileBubble_subtitle {
+        grid-column: 2;
         overflow-wrap: break-word;
     }
 
     .mx_EventTileBubble_title {
         font-weight: 600;
         font-size: $font-15px;
-        grid-column: 2;
         grid-row: 1;
     }
 
     .mx_EventTileBubble_subtitle {
         font-size: $font-12px;
-        grid-column: 2;
         grid-row: 2;
     }
 
@@ -68,6 +60,6 @@ limitations under the License.
         grid-column: 4;
         grid-row: 1 / 3;
         align-self: center;
-        margin-left: 16px;
+        margin-left: $spacing-16;
     }
 }

res/css/views/rooms/_EventTile.scss

@@ -73,6 +73,10 @@ $left-gutter: 64px;
         }
     }
 
+    .mx_EventTileBubble {
+        margin-block: 10px; // TODO: Use a spacing variable
+    }
+
     .mx_MImageBody {
         .mx_MImageBody_thumbnail_container {
             display: flex;
@@ -217,10 +221,28 @@ $left-gutter: 64px;
         }
     }
 
+    &[data-layout=bubble],
+    &[data-layout=group] {
+        .mx_EventTileBubble {
+            margin-inline: auto;
+        }
+    }
+
     &[data-layout=irc] {
+        --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
+
         .mx_MessageTimestamp {
             text-align: right;
         }
+
+        .mx_EventTileBubble {
+            position: relative;
+            left: var(--EventTile_irc_line_info-inset-inline-start);
+        }
+
+        .mx_ReplyTile .mx_EventTileBubble {
+            left: unset; // Cancel the value specified above for the tile inside ReplyTile
+        }
     }
 
     &[data-layout=group] {
@@ -306,6 +328,11 @@ $left-gutter: 64px;
     }
 
     &[data-layout=bubble] {
+        .mx_EventTileBubble {
+            // Timestamps are inside the tile, so the width can be less constrained
+            max-width: 600px;
+        }
+
         &.mx_EventTile_continuation {
             margin-top: 2px;
         }

res/css/views/rooms/_IRCLayout.scss

@@ -163,13 +163,13 @@ $irc-line-height: $font-18px;
 
     .mx_EventTile.mx_EventTile_info {
         .mx_EventTile_avatar {
-            left: calc(var(--name-width) + 10px + var(--icon-width));
+            left: var(--EventTile_irc_line_info-inset-inline-start);
             top: 0;
             margin-right: var(--right-padding);
         }
 
         .mx_EventTile_line {
-            left: calc(var(--name-width) + 10px + var(--icon-width));
+            left: var(--EventTile_irc_line_info-inset-inline-start);
         }
 
         .mx_TextualEvent {