Move mx_EventTile_line and mx_EventTile_reply out of mx_EventTile:not([data-layout=bubble]) (#8910)

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/right_panel/_TimelineCard.scss

@@ -34,9 +34,25 @@ limitations under the License.
     .mx_EventTile {
         &[data-layout=irc],
         &[data-layout=group] {
+            &.mx_EventTile_info .mx_EventTile_line,
+            .mx_EventTile_line {
+                padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
+                padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
+
+                .mx_EventTile_e2eIcon {
+                    inset-inline-start: $spacing-8;
+                }
+            }
+
+            &.mx_EventTile_info {
+                .mx_EventTile_avatar {
+                    inset-inline-start: 18px;
+                }
+            }
+
             .mx_EventTile_avatar {
                 position: absolute; // for IRC layout
-                left: -3px;
+                inset-inline-start: -3px;
             }
 
             .mx_EventTile_msgOption {
@@ -83,27 +99,11 @@ limitations under the License.
         }
 
         &:not([data-layout="bubble"]) {
-            &.mx_EventTile_info .mx_EventTile_line,
-            .mx_EventTile_line {
-                padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
-                padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
-
-                .mx_EventTile_e2eIcon {
-                    inset-inline-start: 8px;
-                }
-            }
-
             .mx_MessageTimestamp {
                 position: absolute; // for modern layout and IRC layout
                 inset-inline-start: auto;
                 inset-inline-end: 0;
             }
-
-            &.mx_EventTile_info {
-                .mx_EventTile_avatar {
-                    left: 18px;
-                }
-            }
         }
     }
 

res/css/views/rooms/_EventTile.scss

@@ -86,6 +86,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         .mx_MImageBody {
             margin-right: 34px;
         }
+
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
+            position: relative;
+            border-radius: 8px;
+        }
+
+        .mx_EventTile_reply {
+            margin-right: 10px;
+        }
     }
 
     &[data-layout=group] {
@@ -113,6 +123,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         .mx_EventTile_reply {
             padding-top: 1px;
             padding-bottom: 3px;
+            padding-left: $left-gutter;
             line-height: $font-22px;
         }
 
@@ -197,17 +208,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         clear: both;
     }
 
-    .mx_EventTile_line,
-    .mx_EventTile_reply {
-        position: relative;
-        padding-left: $left-gutter;
-        border-radius: 8px;
-    }
-
-    .mx_EventTile_reply {
-        margin-right: 10px;
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */

res/css/views/rooms/_IRCLayout.scss

@@ -48,8 +48,8 @@ $irc-line-height: $font-18px;
             }
         }
 
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding: 0;
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
             display: flex;
             flex-direction: column;
             order: 3;