From 81f2b19d322b28309b3a4a2e86bc858c73ddc38c Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 8 Feb 2022 13:11:18 +0000
Subject: [PATCH] Tweak timeline card layout (#7743)

---
 res/css/views/right_panel/_TimelineCard.scss | 33 ++++++++++++++++++--
 res/css/views/rooms/_EventTile.scss          |  2 +-
 res/css/views/rooms/_WhoIsTypingTile.scss    |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 8e8c904126..ab48567907 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -28,31 +28,43 @@ limitations under the License.
 
     .mx_BaseCard_header {
         margin: 5px 0 9px 0;
+
         .mx_BaseCard_close {
             margin: 8px;
             right: 0;
         }
     }
+
     .mx_AutoHideScrollbar {
         padding-right: 10px;
         width: calc(100% - 10px);
     }
 
-    // Style to optimize the layout for the right panel area
+    .mx_NewRoomIntro {
+        margin-left: 36px;
+    }
+
     .mx_EventTile_content {
         margin-right: 0;
     }
+
     .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
         padding-left: 36px;
         padding-right: 36px;
     }
 
+    .mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
+        padding-left: 36px;
+        padding-right: 36px;
+    }
+
     .mx_GroupLayout .mx_EventTile > .mx_SenderProfile {
         margin-left: 36px;
     }
+
     .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
         top: 12px;
-        left: 0px;
+        left: -3px;
     }
 
     .mx_CallEvent_wrapper {
@@ -62,6 +74,7 @@ limitations under the License.
             margin: 4px;
         }
     }
+
     .mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
         right: -4px;
         left: auto;
@@ -70,18 +83,32 @@ limitations under the License.
     .mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
         margin-right: 2px;
     }
+
+    .mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
+        padding-left: 36px;
+    }
+
     .mx_GroupLayout .mx_EventTile .mx_EventTile_line {
         padding-bottom: 8px;
     }
+
     .mx_EventTile_readAvatars {
         top: -10px;
     }
 
-    // mx_EventTile_info
     .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line {
         padding-left: 36px;
     }
+
     .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_avatar {
         left: 18px;
     }
+
+    .mx_WhoIsTypingTile {
+        margin-left: -12px; // undo padding on the message list
+    }
+
+    .mx_WhoIsTypingTile_avatars {
+        flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
+    }
 }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 9e90e7d6eb..1cdc83ec14 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -286,7 +286,7 @@ $left-gutter: 64px;
 }
 
 .mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
-    padding-left: calc($left-gutter);
+    padding-left: $left-gutter;
 }
 
 /* all the overflow-y: hidden; are to trap Zalgos -
diff --git a/res/css/views/rooms/_WhoIsTypingTile.scss b/res/css/views/rooms/_WhoIsTypingTile.scss
index 6e223ed0e0..86ac07e615 100644
--- a/res/css/views/rooms/_WhoIsTypingTile.scss
+++ b/res/css/views/rooms/_WhoIsTypingTile.scss
@@ -23,7 +23,7 @@ limitations under the License.
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
 .mx_WhoIsTypingTile_avatars {
-    flex: 0 0 83px; // 18 + 65
+    flex: 0 0 82px; // 18 (padding on message list) + 64 (padding on event lines)
     text-align: center;
 }