More memberlist changes (#29069)

* Remove parenthesis from Invited user label

* Ensure adequate margin

* Truncate user id with ellipsis

* Fix tests

Author: MidhunSureshR

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");
     });
 });

playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png

@@ -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) {

res/css/views/messages/_DisambiguatedProfile.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 {

res/css/views/rooms/_MemberTileView.pcss

@@ -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 {

src/components/viewmodels/memberlist/tiles/MemberTileViewModel.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,

src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx

@@ -228,7 +228,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
         <div
           class="mx_MemberTileView_userLabel"
         >
-          (Invited)
+          Invited
         </div>
         <div
           class="mx_Flex mx_InvitedIconView"