Fix broken threads list timestamp layout (#9922)

* Add option to show full identifier as tooltip on sender profiles
* Show full user id as tooltip on threads list entries
* Fix broken threads list timestamp layout

Previously, thread list timestamps would overflow
into the unread messages bubble on the right.

This is fixed by resetting the width of the
timestamp and ensuring both the timestamp and the
display name can shrink if necessary.
Both now also use ellipses if necessary.

Author: justjanne

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",