Polish threads misalignments and UI diversion (#7209)

res/css/views/rooms/_EventTile.scss

@@ -113,16 +113,11 @@ $left-gutter: 64px;
         margin-right: 10px;
     }
 
-    &.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-        left: calc(-$selected-message-border-width);
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
     &.mx_EventTile_selected > .mx_EventTile_line {
-        border-left: $accent $selected-message-border-width solid;
+        box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
-        padding-left: calc($left-gutter - $selected-message-border-width);
         background-color: $event-selected-color;
     }
 
@@ -136,7 +131,7 @@ $left-gutter: 64px;
     }
 
     &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px - $selected-message-border-width);
+        padding-left: calc($left-gutter + 18px);
     }
 
     &.mx_EventTile:hover .mx_EventTile_line,
@@ -218,28 +213,22 @@ $left-gutter: 64px;
         border-bottom-left-radius: 4px;
     }
 
-    &:hover.mx_EventTile_verified .mx_EventTile_line,
-    &:hover.mx_EventTile_unverified .mx_EventTile_line,
-    &:hover.mx_EventTile_unknown .mx_EventTile_line {
-        padding-left: calc($left-gutter - $selected-message-border-width);
-    }
-
     &:hover.mx_EventTile_verified .mx_EventTile_line {
-        border-left: $e2e-verified-color $selected-message-border-width solid;
+        box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-verified-color;
     }
 
     &:hover.mx_EventTile_unverified .mx_EventTile_line {
-        border-left: $e2e-unverified-color $selected-message-border-width solid;
+        box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unverified-color;
     }
 
     &:hover.mx_EventTile_unknown .mx_EventTile_line {
-        border-left: $e2e-unknown-color $selected-message-border-width solid;
+        box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unknown-color;
     }
 
     &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
     &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
     &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px - $selected-message-border-width);
+        padding-left: calc($left-gutter + 18px + $selected-message-border-width);
     }
 
     /* End to end encryption stuff */
@@ -247,21 +236,6 @@ $left-gutter: 64px;
         opacity: 1;
     }
 
-    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-    &:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
-    &:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
-    &:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-        left: calc(-$selected-message-border-width);
-    }
-
-    // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-    &:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-    &:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
-    &:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
-        display: block;
-        left: 41px;
-    }
-
     .mx_MImageBody {
         margin-right: 34px;
     }
@@ -808,7 +782,7 @@ $left-gutter: 64px;
     }
     .mx_MessageTimestamp {
         right: 0;
-        left: auto;
+        left: auto !important;
         top: -23px;
     }
 }
@@ -851,7 +825,7 @@ $left-gutter: 64px;
         padding-top: 0;
 
         .mx_EventTile_line {
-            padding-left: $selected-message-border-width !important;
+            padding-left: 0;
             order: 10 !important;
         }
 
@@ -860,6 +834,7 @@ $left-gutter: 64px;
             right: 2px !important;
             top: 1px !important;
             font-size: 1rem;
+            text-align: right;
         }
 
         .mx_ReactionsRow {
@@ -872,9 +847,26 @@ $left-gutter: 64px;
     }
 
     .mx_EventTile_content,
-    .mx_RedactedBody {
+    .mx_RedactedBody,
+    .mx_ReplyChain_wrapper {
         margin-left: 36px;
         margin-right: 50px;
+
+        .mx_EventTile_content,
+        .mx_RedactedBody,
+        .mx_MImageBody {
+            margin: 0;
+        }
+    }
+
+    .mx_EventTile_mediaLine {
+        padding-left: 36px !important;
+        padding-right: 50px;
+
+        .mx_MImageBody {
+            margin: 0;
+            padding: 0;
+        }
     }
 
     .mx_MessageComposer_sendMessage {

src/components/structures/TimelinePanel.tsx

@@ -507,7 +507,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // (and user is active), switch timeout
         const timeout = this.readMarkerTimeout(rmPosition);
         // NO-OP when timeout already has set to the given value
-        this.readMarkerActivityTimer.changeTimeout(timeout);
+        this.readMarkerActivityTimer?.changeTimeout(timeout);
     }, READ_MARKER_DEBOUNCE_MS, { leading: false, trailing: true });
 
     private onAction = (payload: ActionPayload): void => {

src/components/views/rooms/EventTile.tsx

@@ -1362,22 +1362,9 @@ export default class EventTile extends React.Component<IProps, IState> {
                         >
                             { linkedTimestamp }
                             { this.renderE2EPadlock() }
-                            { replyChain }
+                            <div className="mx_EventTile_body">
-                            <EventTileType ref={this.tile}
+                                { MessagePreviewStore.instance.generatePreviewForEvent(this.props.mxEvent) }
-                                mxEvent={this.props.mxEvent}
+                            </div>
-                                forExport={this.props.forExport}
-                                replacingEventId={this.props.replacingEventId}
-                                editState={this.props.editState}
-                                highlights={this.props.highlights}
-                                highlightLink={this.props.highlightLink}
-                                showUrlPreview={this.props.showUrlPreview}
-                                permalinkCreator={this.props.permalinkCreator}
-                                onHeightChanged={this.props.onHeightChanged}
-                                callEventGrouper={this.props.callEventGrouper}
-                                tileShape={this.props.tileShape}
-                                getRelationsForEvent={this.props.getRelationsForEvent}
-                            />
-                            { keyRequestInfo }
                             { this.renderThreadPanelSummary() }
                         </div>
                         <Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">