From c86040b77a482bf70c4778dfb5a80ed2ae4392a9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 7 May 2022 03:07:51 +0000
Subject: [PATCH] Fix timestamp's position on the chat panel with a maximized
 widget in IRC layout (#8464)

Fix avatar's position on the chat panel with a maximized widget in IRC layout
Fix timestamp's position on Message Edits history modal window

Also:
- Align DisambiguatedProfile with reactions row and thread summary with a variable
- Add width property as default
- Use the global variable on _IRCLayout.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 .../dialogs/_MessageEditHistoryDialog.scss     |  6 ++++++
 res/css/views/messages/_MessageTimestamp.scss  |  1 +
 res/css/views/right_panel/_TimelineCard.scss   | 18 +++++++++++++-----
 res/css/views/rooms/_GroupLayout.scss          |  3 +--
 res/css/views/rooms/_IRCLayout.scss            |  6 ++----
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index 5838939d9b..1d7759fe2b 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -55,6 +55,12 @@ limitations under the License.
         text-decoration: underline;
     }
 
+    .mx_EventTile {
+        .mx_MessageTimestamp {
+            position: absolute;
+        }
+    }
+
     .mx_EventTile_line, .mx_EventTile_content {
         margin-right: 0px;
     }
diff --git a/res/css/views/messages/_MessageTimestamp.scss b/res/css/views/messages/_MessageTimestamp.scss
index 85c910296a..d496ff82c8 100644
--- a/res/css/views/messages/_MessageTimestamp.scss
+++ b/res/css/views/messages/_MessageTimestamp.scss
@@ -18,4 +18,5 @@ limitations under the License.
     color: $event-timestamp-color;
     font-size: $font-10px;
     font-variant-numeric: tabular-nums;
+    width: $MessageTimestamp_width;
 }
diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 94eac2805e..13dd5af6af 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -52,31 +52,39 @@ limitations under the License.
     }
 
     .mx_EventTile:not([data-layout="bubble"]) {
+        $left-gutter: 36px;
+
         .mx_EventTile_line {
-            padding-left: 36px;
-            padding-right: 36px;
+            padding-inline-start: $left-gutter;
+            padding-inline-end: 36px;
+        }
+
+        .mx_DisambiguatedProfile,
+        .mx_ReactionsRow,
+        .mx_ThreadSummary {
+            margin-inline-start: $left-gutter;
         }
 
         .mx_ReactionsRow {
             padding: 0;
 
             // See margin setting of ReactionsRow on _EventTile.scss
-            margin-left: 36px;
             margin-right: 8px;
         }
 
         .mx_ThreadSummary {
-            margin-left: 36px;
             margin-right: 0;
             max-width: min(calc(100% - 36px), 600px);
         }
 
         .mx_EventTile_avatar {
+            position: absolute; // for IRC layout
             top: 12px;
             left: -3px;
         }
 
         .mx_MessageTimestamp {
+            position: absolute; // for modern layout and IRC layout
             right: -4px;
             left: auto;
         }
@@ -87,7 +95,7 @@ limitations under the License.
 
         &.mx_EventTile_info {
             .mx_EventTile_line {
-                padding-left: 36px;
+                padding-left: $left-gutter;
             }
 
             .mx_EventTile_avatar {
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index b1d6e8b535..f08fa1512e 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -30,8 +30,7 @@ $left-gutter: 64px;
         }
 
         .mx_MessageTimestamp {
-            position: absolute;
-            width: $MessageTimestamp_width;
+            position: absolute; // for modern layout
         }
 
         .mx_EventTile_line, .mx_EventTile_reply {
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index c09ee47676..d689d15234 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 $icon-width: 14px;
-$timestamp-width: 45px;
 $right-padding: 5px;
 $irc-line-height: $font-18px;
 
@@ -28,7 +27,7 @@ $irc-line-height: $font-18px;
         // timestamps are links which shouldn't be underlined
         > a {
             text-decoration: none;
-            min-width: 45px;
+            min-width: $MessageTimestamp_width;
         }
 
         display: flex;
@@ -85,7 +84,6 @@ $irc-line-height: $font-18px;
 
         .mx_MessageTimestamp {
             font-size: $font-10px;
-            width: $timestamp-width;
             text-align: right;
         }
 
@@ -141,7 +139,7 @@ $irc-line-height: $font-18px;
 
     .mx_GenericEventListSummary {
         > .mx_EventTile_line {
-            padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+            padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
         }
 
         .mx_GenericEventListSummary_avatars {