diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
index 7fccd6e2d1..5620aa63fe 100644
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@@ -119,6 +119,9 @@ Please see LICENSE files in the repository root for full details.
             word-break: break-all;
             text-overflow: ellipsis;
 
+            /* Don't spill over the container */
+            width: 90%;
+
             /* E2E icon wrapper */
             .mx_Flex > span {
                 display: inline-block;
@@ -127,11 +130,15 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_UserInfo_profile_name {
             height: 30px;
+            text-wrap: nowrap;
         }
 
         .mx_UserInfo_profile_mxid {
             color: var(--cpd-color-text-secondary);
             height: 28px;
+            max-width: 100%;
+            /* MXIDs are one long "word" */
+            word-break: break-all;
         }
 
         .mx_UserInfo_profileStatus {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 276c5b3bbd..97eb5db0c3 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -1409,7 +1409,11 @@ export const UserInfoHeader: React.FC<{
                 <Flex direction="column" align="center" className="mx_UserInfo_profile">
                     <Heading size="sm" weight="semibold" as="h1" dir="auto">
                         <Flex className="mx_UserInfo_profile_name" direction="row-reverse" align="center">
-                            {displayName}
+                            <Tooltip isTriggerInteractive={true} placement="left" label={displayName}>
+                                <span>
+                                    {displayName}
+                                </span>
+                            </Tooltip>
                         </Flex>
                     </Heading>
                     {presenceLabel}
@@ -1422,11 +1426,13 @@ export const UserInfoHeader: React.FC<{
                             </Flex>
                         </Tooltip>
                     )}
-                    <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
-                        <CopyableText getTextToCopy={() => userIdentifier} border={false}>
-                            {userIdentifier}
-                        </CopyableText>
-                    </Text>
+                    {userIdentifier && (
+                        <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
+                            <CopyableText getTextToCopy={() => userIdentifier} border={false}>
+                                {userIdentifier}
+                            </CopyableText>
+                        </Text>
+                    )}
                 </Flex>
                 {!hideVerificationSection && <VerificationSection member={member} devices={devices} />}
             </Container>