sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
+6
View File
@@ -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_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar, > .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar { > .mx_BaseAvatar {
apps/web/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+11 -2
View File
@@ -664,7 +664,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
{...ariaProperties} {...ariaProperties}
> >
<DecoratedRoomAvatar room={result.room} size={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} /> <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} /> <NotificationBadge notification={notification} />
<RoomContextDetails <RoomContextDetails
id={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`} 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`} aria-describedby={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
> >
<SearchResultAvatar user={result.member} size={AVATAR_SIZE} /> <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 <div
id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`} id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
className="mx_SpotlightDialog_result_details" className="mx_SpotlightDialog_result_details"