Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994)

* Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

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

* Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

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

* Use variables

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

* Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout

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

* Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only

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

* Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default)

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

* Apply avatar position settings to modern/group layout only

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

* Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss

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

* Remove obsolete style block

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

* Remove inline padding setting from mx_EventTile_line

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

* Use a correct variable

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

* Fix misalignment of avatars and textual events on IRC layout

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

* Align avatars and hidden events on IRC layout

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

res/css/views/rooms/_EventTile.scss

@@ -207,6 +207,12 @@ $left-gutter: 64px;
             }
         }
 
+        &.mx_EventTile_info {
+            .mx_EventTile_e2eIcon {
+                top: 0;
+            }
+        }
+
         &.mx_EventTile_continuation .mx_EventTile_line {
             clear: both;
         }
@@ -267,6 +273,15 @@ $left-gutter: 64px;
                 padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
             }
         }
+
+        &.mx_EventTile_info {
+            .mx_EventTile_avatar {
+                left: var(--EventTile_irc_line_info-inset-inline-start);
+                top: 0;
+                margin-right: var(--right-padding);
+                padding-block: var(--EventTile_irc_line-padding-block);
+            }
+        }
     }
 
     &[data-layout=group] {
@@ -338,8 +353,31 @@ $left-gutter: 64px;
             padding-top: 0px !important;
         }
 
-        &.mx_EventTile_info .mx_EventTile_line {
+        &.mx_EventTile_info {
-            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+            $spacing-block-start: 3px;
+            $spacing-block-end: 2px;
+
+            padding-top: 0;
+
+            .mx_EventTile_avatar,
+            .mx_EventTile_e2eIcon {
+                margin: $spacing-block-start 0 $spacing-block-end;
+            }
+
+            .mx_EventTile_avatar {
+                top: initial;
+                inset-inline-start: $left-gutter;
+                height: 14px;
+            }
+
+            .mx_EventTile_line {
+                padding-block: $spacing-block-start $spacing-block-end;
+                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area
+
+                .mx_MessageTimestamp {
+                    top: 0;
+                }
+            }
         }
 
         &:hover {
@@ -370,33 +408,6 @@ $left-gutter: 64px;
     font-size: $font-14px;
     position: relative;
 
-    &.mx_EventTile_info {
-        padding-top: 0;
-
-        .mx_EventTile_avatar,
-        .mx_EventTile_e2eIcon {
-            margin: 3px 0 2px; // Align with mx_EventTile_line
-        }
-
-        .mx_EventTile_e2eIcon {
-            top: 0;
-        }
-
-        .mx_EventTile_avatar {
-            top: initial;
-            inset-inline-start: $left-gutter;
-            height: 14px;
-        }
-
-        .mx_EventTile_line {
-            padding-block: 3px 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
-
-            .mx_MessageTimestamp {
-                top: 0;
-            }
-        }
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
@@ -425,10 +436,6 @@ $left-gutter: 64px;
     }
 
     &[data-layout=irc] {
-        .mx_EventTile_info .mx_EventTile_line {
-            padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
-        }
-
         .mx_EventTile_line .mx_RedactedBody {
             padding-left: 24px; // 25px - 1px
 

res/css/views/rooms/_IRCLayout.scss

@@ -24,6 +24,8 @@ $irc-line-height: $font-18px;
     line-height: $irc-line-height !important;
 
     .mx_EventTile {
+        --EventTile_irc_line-padding-block: 1px;
+
         // timestamps are links which shouldn't be underlined
         > a {
             text-decoration: none;
@@ -129,10 +131,11 @@ $irc-line-height: $font-18px;
         .mx_EventTile_line {
             .mx_EventTile_e2eIcon,
             .mx_TextualEvent,
+            .mx_ViewSourceEvent,
             .mx_MTextBody {
                 display: inline-block;
                 // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
-                padding: 1px 0;
+                padding: var(--EventTile_irc_line-padding-block) 0;
             }
 
             .mx_ReplyTile {
@@ -162,16 +165,11 @@ $irc-line-height: $font-18px;
     }
 
     .mx_EventTile.mx_EventTile_info {
-        .mx_EventTile_avatar {
-            left: var(--EventTile_irc_line_info-inset-inline-start);
-            top: 0;
-            margin-right: var(--right-padding);
-        }
-
         .mx_EventTile_line {
             left: var(--EventTile_irc_line_info-inset-inline-start);
         }
 
+        .mx_ViewSourceEvent, // For hidden events
         .mx_TextualEvent {
             line-height: $irc-line-height;
         }