Add ellipsis and title to spotlight search results (#34379)

This commit is contained in:
David Langley
2026-07-22 13:11:38 +00:00
committed by GitHub
parent 5603ae02d9
commit 5b0fd416fd
2 changed files with 17 additions and 2 deletions
@@ -259,6 +259,12 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_SpotlightDialog_result_name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
@@ -664,7 +664,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
{...ariaProperties}
>
<DecoratedRoomAvatar room={result.room} size={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
{result.room.name}
<span className="mx_SpotlightDialog_result_name" title={result.room.name}>
{result.room.name}
</span>
<NotificationBadge notification={notification} />
<RoomContextDetails
id={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
@@ -689,7 +691,14 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
aria-describedby={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
>
<SearchResultAvatar user={result.member} size={AVATAR_SIZE} />
{result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name}
<span
className="mx_SpotlightDialog_result_name"
title={
result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name
}
>
{result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name}
</span>
<div
id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
className="mx_SpotlightDialog_result_details"