diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss index 25a28971d4..93dce8ab52 100644 --- a/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/res/css/views/messages/_DisambiguatedProfile.pcss @@ -21,8 +21,29 @@ Please see LICENSE files in the repository root for full details. } .mx_DisambiguatedProfile_mxid { - margin-inline-start: 5px; color: $secondary-content; font-size: var(--cpd-font-size-body-sm); + margin-inline-start: 5px; + } +} + +/** Disambiguated profile needs to have a different layout in the member tile */ +.mx_MemberTileView .mx_DisambiguatedProfile { + display: flex; + flex-direction: column; + + .mx_DisambiguatedProfile_mxid { + margin-inline-start: 0; + font: var(--cpd-font-body-sm-regular); + } + + span:not(.mx_DisambiguatedProfile_mxid) { + /** + In a member tile, this span element is a flex child and so + we need the following for text overflow to work. + **/ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx index 0e7d2e046e..b6b469eaa6 100644 --- a/src/components/views/messages/DisambiguatedProfile.tsx +++ b/src/components/views/messages/DisambiguatedProfile.tsx @@ -8,15 +8,21 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import { RoomMember } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import { _t } from "../../../languageHandler"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; import UserIdentifier from "../../../customisations/UserIdentifier"; +interface MemberInfo { + userId: string; + roomId: string; + rawDisplayName?: string; + disambiguate: boolean; +} + interface IProps { - member?: RoomMember | null; + member?: MemberInfo | null; fallbackName: string; onClick?(): void; colored?: boolean;