Fix broken threads list timestamp layout

res/css/views/rooms/_EventTile.pcss

@@ -884,6 +884,7 @@ $left-gutter: 64px;
 
     &::before {
         inset: 0;
+        pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
     }
 
     /* Display notification dot */
@@ -927,8 +928,14 @@ $left-gutter: 64px;
         inset: $padding auto auto $padding;
     }
 
+    .mx_EventTile_details {
+        overflow: hidden;
+    }
+
     .mx_DisambiguatedProfile {
         display: inline-flex;
+        align-items: center;
+        flex: 1;
 
         .mx_DisambiguatedProfile_displayName,
         .mx_DisambiguatedProfile_mxid {
@@ -979,7 +986,9 @@ $left-gutter: 64px;
 
     .mx_MessageTimestamp {
         font-size: $font-12px;
-        max-width: var(--MessageTimestamp-max-width);
+        width: unset; /* Cancel the default width */
+        overflow: hidden; /* ensure correct overflow behavior */
+        text-overflow: ellipsis;
         position: initial;
         margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
     }

src/components/views/messages/DisambiguatedProfile.tsx

@@ -1,6 +1,6 @@
 /*
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +19,7 @@ import React from "react";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import classNames from "classnames";
 
+import { _t } from "../../../languageHandler";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import UserIdentifier from "../../../customisations/UserIdentifier";
 
@@ -28,35 +29,44 @@ interface IProps {
     onClick?(): void;
     colored?: boolean;
     emphasizeDisplayName?: boolean;
+    withTooltip?: boolean;
 }
 
 export default class DisambiguatedProfile extends React.Component<IProps> {
     public render(): JSX.Element {
-        const { fallbackName, member, colored, emphasizeDisplayName, onClick } = this.props;
+        const { fallbackName, member, colored, emphasizeDisplayName, withTooltip, onClick } = this.props;
         const rawDisplayName = member?.rawDisplayName || fallbackName;
         const mxid = member?.userId;
 
-        let colorClass;
+        let colorClass: string | undefined;
         if (colored) {
             colorClass = getUserNameColorClass(fallbackName);
         }
 
         let mxidElement;
-        if (member?.disambiguate && mxid) {
-            mxidElement = (
-                <span className="mx_DisambiguatedProfile_mxid">
-                    {UserIdentifier.getDisplayUserIdentifier(mxid, { withDisplayName: true, roomId: member.roomId })}
-                </span>
-            );
+        let title: string | undefined;
+
+        if (mxid) {
+            const identifier =
+                UserIdentifier.getDisplayUserIdentifier?.(mxid, {
+                    withDisplayName: true,
+                    roomId: member.roomId,
+                }) ?? mxid;
+            if (member?.disambiguate) {
+                mxidElement = <span className="mx_DisambiguatedProfile_mxid">{identifier}</span>;
+            }
+            title = _t("%(displayName)s (%(matrixId)s)", {
+                displayName: rawDisplayName,
+                matrixId: identifier,
+            });
         }
 
-        const displayNameClasses = classNames({
+        const displayNameClasses = classNames(colorClass, {
             mx_DisambiguatedProfile_displayName: emphasizeDisplayName,
-            [colorClass]: true,
         });
 
         return (
-            <div className="mx_DisambiguatedProfile" onClick={onClick}>
+            <div className="mx_DisambiguatedProfile" title={withTooltip ? title : undefined} onClick={onClick}>
                 <span className={displayNameClasses} dir="auto">
                     {rawDisplayName}
                 </span>

src/components/views/messages/SenderProfile.tsx

@@ -1,4 +1,5 @@
 /*
+ Copyright 2023 The Matrix.org Foundation C.I.C.
  Copyright 2015, 2016 OpenMarket Ltd
 
  Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,9 +25,10 @@ import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
 interface IProps {
     mxEvent: MatrixEvent;
     onClick?(): void;
+    withTooltip?: boolean;
 }
 
-export default function SenderProfile({ mxEvent, onClick }: IProps): JSX.Element {
+export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps): JSX.Element {
     const member = useRoomMemberProfile({
         userId: mxEvent.getSender(),
         member: mxEvent.sender,
@@ -39,6 +41,7 @@ export default function SenderProfile({ mxEvent, onClick }: IProps): JSX.Element
             member={member}
             colored={true}
             emphasizeDisplayName={true}
+            withTooltip={withTooltip}
         />
     ) : null;
 }

src/components/views/rooms/EventTile.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015 - 2022 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 2023 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -1091,6 +1091,8 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 this.context.timelineRenderingType === TimelineRenderingType.Thread
             ) {
                 sender = <SenderProfile onClick={this.onSenderProfileClick} mxEvent={this.props.mxEvent} />;
+            } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
+                sender = <SenderProfile mxEvent={this.props.mxEvent} withTooltip />;
             } else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} />;
             }

src/i18n/strings/en_EN.json

@@ -2316,6 +2316,7 @@
     "Last month": "Last month",
     "The beginning of the room": "The beginning of the room",
     "Jump to date": "Jump to date",
+    "%(displayName)s (%(matrixId)s)": "%(displayName)s (%(matrixId)s)",
     "Downloading": "Downloading",
     "Decrypting": "Decrypting",
     "Download": "Download",