Fix MessageTimestamp position next to redacted messages on IRC/modern…

… layout (#8591)
element-hq · May 14, 2022 · f54d54b · f54d54b
1 parent e6ec01f
commit f54d54b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/res/css/views/messages/_ViewSourceEvent.scss b/res/css/views/messages/_ViewSourceEvent.scss
@@ -20,6 +20,7 @@ limitations under the License.
     font-size: $font-12px;
     width: 100%;
     overflow-x: auto; // Cancel overflow setting of .mx_EventTile_content
+    line-height: normal; // Align with avatar and E2E icon
 
     pre,
     code {

diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
@@ -258,8 +258,12 @@ limitations under the License.
             }
 
             &:not([data-layout=bubble]) {
+                .mx_MessageTimestamp {
+                    top: 2px; // Align with avatar
+                }
+
                 .mx_EventTile_avatar {
-                    top: 1.5px;
+                    top: 0; // Align with hidden event content
                     left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
                     z-index: 9; // position above the hover styling
                 }

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -116,6 +116,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
         .mx_EventTile_line {
             padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
+
+            .mx_MessageTimestamp {
+                top: 0;
+            }
         }
     }
 
@@ -278,7 +282,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 .mx_GenericEventListSummary:not([data-layout=bubble]) {
     .mx_EventTile_line {
         padding-left: $left-gutter;
-        line-height: normal;
 
         .mx_RedactedBody {
             line-height: 1; // remove spacing between lines