More memberlist changes (#29069)

* Remove parenthesis from Invited user label * Ensure adequate margin * Truncate user id with ellipsis * Fix tests
element-hq · Jan 22, 2025 · e1e4d26 · e1e4d26
1 parent 84c6146
commit e1e4d26
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 4 deletions.
diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts
@@ -42,7 +42,7 @@ test.describe("Memberlist", () => {
         await app.viewRoomByName(ROOM_NAME);
         const memberlist = await app.toggleMemberlistPanel();
         await expect(memberlist.locator(".mx_MemberTileView")).toHaveCount(4);
-        await expect(memberlist.getByText("(Invited)")).toHaveCount(1);
+        await expect(memberlist.getByText("Invited")).toHaveCount(1);
         await expect(page.locator(".mx_MemberListView")).toMatchScreenshot("with-four-members.png");
     });
 });
diff --git a/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png b/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png
diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -35,6 +35,8 @@ Please see LICENSE files in the repository root for full details.
     .mx_DisambiguatedProfile_mxid {
         margin-inline-start: 0;
         font: var(--cpd-font-body-sm-regular);
+        text-overflow: ellipsis;
+        overflow: hidden;
     }
 
     span:not(.mx_DisambiguatedProfile_mxid) {

diff --git a/res/css/views/rooms/_MemberTileView.pcss b/res/css/views/rooms/_MemberTileView.pcss
@@ -35,6 +35,7 @@ Please see LICENSE files in the repository root for full details.
         font: var(--cpd-font-body-sm-regular);
         font-size: 13px;
         color: var(--cpd-color-text-secondary);
+        margin-left: var(--cpd-space-4x);
     }
 
     .mx_MemberTileView_avatar {

diff --git a/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
@@ -145,7 +145,7 @@ export function useMemberTileViewModel(props: MemberTileViewModelProps): MemberT
         userLabel = _t(PowerLabel[powerStatus]);
     }
     if (props.member.isInvite) {
-        userLabel = `(${_t("member_list|invited_label")})`;
+        userLabel = _t("member_list|invited_label");
     }
 
     return {

diff --git a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
@@ -30,7 +30,7 @@ export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): Thr
         });
     };
 
-    const userLabel = `(${_t("member_list|invited_label")})`;
+    const userLabel = _t("member_list|invited_label");
 
     return {
         name,

diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -228,7 +228,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
         <div
           class="mx_MemberTileView_userLabel"
         >
-          (Invited)
+          Invited
         </div>
         <div
           class="mx_Flex mx_InvitedIconView"
-Original file line number
+Diff line change
@@ Expand Up @@
             });
         };
-        const userLabel = `(${_t("member_list|invited_label")})`;
+        const userLabel = _t("member_list|invited_label");
         return {
             name,
@@ Expand Down @@