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 <[email protected]>
matrix-org · May 7, 2022 · c86040b · c86040b
1 parent 34471ba
commit c86040b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {