diff --git a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
index f2d63b7a1e..8a7e342bfa 100644
--- a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -9,10 +9,17 @@ Please see LICENSE files in the repository root for full details.
/** Disambiguated profile needs to have a different layout in the member tile */
.mx_MemberTileView .mx_DisambiguatedProfile {
- display: flex;
- flex-direction: column;
+ /* Name and the user status emoji share the first row (with the name truncating and the emoji always visible)
+ Disambiguated MXID gets a full row below. */
+ display: grid;
+ grid-template-columns: min-content 1fr;
+
+ .mx_DisambiguatedProfile_userStatus {
+ margin-inline-start: var(--cpd-space-0-5x);
+ }
.mx_DisambiguatedProfile_mxid {
+ grid-column: 1 / -1;
margin-inline-start: 0;
font: var(--cpd-font-body-sm-regular);
text-overflow: ellipsis;
@@ -21,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
span:not(.mx_DisambiguatedProfile_mxid) {
/**
- In a member tile, this span element is a flex child and so
+ In a member tile, this span element is a grid child and so
we need the following for text overflow to work.
**/
overflow: hidden;
diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
index a381305088..aab430a3ea 100644
--- a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
@@ -18,6 +18,7 @@ import { MemberTileView } from "./common/MemberTileView";
import { InvitedIconView } from "./common/InvitedIconView";
import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel";
import { DisambiguatedProfileViewModel } from "../../../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+import { useUserStatus } from "../../../../../hooks/useUserStatus";
interface IProps {
/**
@@ -47,17 +48,22 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
/>
);
const name = vm.name;
+ const userStatus = useUserStatus(member.userId);
const disambiguatedProfileVM = useCreateAutoDisposedViewModel(
() =>
new DisambiguatedProfileViewModel({
fallbackName: name,
member,
withTooltip: true,
+ userStatus,
}),
);
useEffect(() => {
disambiguatedProfileVM.setMember(name, member);
}, [disambiguatedProfileVM, member, name]);
+ useEffect(() => {
+ disambiguatedProfileVM.setUserStatus(userStatus);
+ }, [disambiguatedProfileVM, userStatus]);
const nameJSX = ;
const presenceState = member.presenceState;
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png
index f016ac3067..12007a7a98 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png differ
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
index fd71067443..6af6bd2162 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
@@ -120,19 +120,23 @@ export function DisambiguatedProfileView({ vm, className }: Readonly
{displayName}
+ {userStatus && (
+
+
+ {userStatusEmoji}
+
+
+ )}
{/* mx_DisambiguatedProfile_mxid is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_mxid */}
{displayIdentifier && (
{displayIdentifier}
)}
- {userStatus && (
-
-
- {userStatusEmoji}
-
-
- )}
);
}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
index 9d4c1fc3d6..087c41314a 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
@@ -31,16 +31,16 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = `
>
Eve
+
+ 🏝️
+
@eve:matrix.org
-
- 🏝️
-
`;