Tweak timeline card layout (matrix-org#7743)

Author: jryans

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)
+    }
 }

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 -

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;
 }