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

* Move mx_MessageTimestamp out of mx_EventTile:not([data-layout=bubble])

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

* Ensure left: 0 and text-align: center for mx_MessageTimestamp on MessageEditHistoryDialog

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

* Apply text-align to MessageTimestamp on IRC layout

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

* Apply text-align to MessageTimestamp on modern/group layout

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

* Apply left: 0 to modern/group layout only

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

* Move mx_MessageTimestamp out of mx_EventTile:not([data-layout=bubble])

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

* Remove an obvious comment

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

* Cascading order

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

* Remove an obsolete comment

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

res/css/structures/_FilePanel.scss

@@ -96,7 +96,7 @@ limitations under the License.
 
         .mx_MessageTimestamp {
             flex: 1 0 0;
-            text-align: right; // FIXME: .mx_EventTile:not([data-layout=bubble]) .mx_MessageTimestamp
+            text-align: right;
             visibility: visible;
             position: initial;
             font-size: $font-14px;

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -51,11 +51,14 @@ limitations under the License.
         text-decoration: underline;
     }
 
+    // Emulate mx_EventTile[data-layout=group]
     .mx_EventTile {
         padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
 
         .mx_MessageTimestamp {
             position: absolute;
+            left: 0;
+            text-align: center;
         }
 
         .mx_EventTile_line {

res/css/views/rooms/_EventTile.scss

@@ -195,16 +195,18 @@ $left-gutter: 64px;
         }
     }
 
+    &[data-layout=irc] {
+        .mx_MessageTimestamp {
+            text-align: right;
+        }
+    }
+
     &[data-layout=group] {
         .mx_EventTile_avatar {
             top: 14px;
             left: $spacing-8;
         }
 
-        .mx_MessageTimestamp {
-            position: absolute; // for modern layout
-        }
-
         .mx_EventTile_line,
         .mx_EventTile_reply {
             padding-top: var(--EventTile_group_line-spacing-block-start);
@@ -221,6 +223,12 @@ $left-gutter: 64px;
             margin-right: 10px;
         }
 
+        .mx_MessageTimestamp {
+            position: absolute;
+            left: 0;
+            text-align: center;
+        }
+
         .mx_ThreadSummary,
         .mx_ThreadSummary_icon {
             margin-left: $left-gutter;
@@ -308,11 +316,6 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_MessageTimestamp {
-        left: 0px;
-        text-align: center;
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
@@ -957,11 +960,14 @@ $left-gutter: 64px;
                 }
             }
 
-            &:not([data-layout=bubble]) {
+            &[data-layout=irc],
+            &[data-layout=group] {
                 .mx_MessageTimestamp {
                     top: 2px; // Align with avatar
                 }
+            }
 
+            &:not([data-layout=bubble]) {
                 .mx_EventTile_avatar {
                     left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
                     z-index: 9; // position above the hover styling
@@ -1067,11 +1073,6 @@ $left-gutter: 64px;
                 }
             }
 
-            .mx_MessageTimestamp {
-                top: 2px; // Align with mx_EventTile_content
-                position: absolute; // for IRC layout
-            }
-
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
@@ -1091,6 +1092,11 @@ $left-gutter: 64px;
                     }
                 }
             }
+
+            .mx_MessageTimestamp {
+                position: absolute; // for IRC layout
+                top: 2px; // Align with mx_EventTile_content
+            }
         }
     }
 

res/css/views/rooms/_IRCLayout.scss

@@ -115,10 +115,6 @@ $irc-line-height: $font-18px;
             }
         }
 
-        .mx_MessageTimestamp {
-            text-align: right;
-        }
-
         .mx_EventTile_e2eIcon {
             padding: 0;