nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Ensure user identifiers can be viewed / tooltip'd.

Browse Source
This commit is contained in:
Half-Shot
2025-03-20 14:46:09 +00:00
parent 435d0f96b8
commit da3fd8645d
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/right_panel/_UserInfo.pcss
View File

@@ -119,6 +119,9 @@ Please see LICENSE files in the repository root for full details.
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
/* Don't spill over the container */
width: 90%;
/* E2E icon wrapper */ /* E2E icon wrapper */
.mx_Flex > span { .mx_Flex > span {
display: inline-block; display: inline-block;
@@ -127,11 +130,15 @@ Please see LICENSE files in the repository root for full details.
.mx_UserInfo_profile_name { .mx_UserInfo_profile_name {
height: 30px; height: 30px;
text-wrap: nowrap;
} }
.mx_UserInfo_profile_mxid { .mx_UserInfo_profile_mxid {
color: var(--cpd-color-text-secondary); color: var(--cpd-color-text-secondary);
height: 28px; height: 28px;
max-width: 100%;
/* MXIDs are one long "word" */
word-break: break-all;
} }
.mx_UserInfo_profileStatus { .mx_UserInfo_profileStatus {

18
src/components/views/right_panel/UserInfo.tsx
View File

@@ -1409,7 +1409,11 @@ export const UserInfoHeader: React.FC<{
<Flex direction="column" align="center" className="mx_UserInfo_profile"> <Flex direction="column" align="center" className="mx_UserInfo_profile">
<Heading size="sm" weight="semibold" as="h1" dir="auto"> <Heading size="sm" weight="semibold" as="h1" dir="auto">
<Flex className="mx_UserInfo_profile_name" direction="row-reverse" align="center"> <Flex className="mx_UserInfo_profile_name" direction="row-reverse" align="center">
{displayName} <Tooltip isTriggerInteractive={true} placement="left" label={displayName}>
<span>
{displayName}
</span>
</Tooltip>
</Flex> </Flex>
</Heading> </Heading>
{presenceLabel} {presenceLabel}
@@ -1422,11 +1426,13 @@ export const UserInfoHeader: React.FC<{
</Flex> </Flex>
</Tooltip> </Tooltip>
)} )}
<Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid"> {userIdentifier && (
<CopyableText getTextToCopy={() => userIdentifier} border={false}> <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
{userIdentifier} <CopyableText getTextToCopy={() => userIdentifier} border={false}>
</CopyableText> {userIdentifier}
</Text> </CopyableText>
</Text>
)}
</Flex> </Flex>
{!hideVerificationSection && <VerificationSection member={member} devices={devices} />} {!hideVerificationSection && <VerificationSection member={member} devices={devices} />}
</Container> </Container>