Flyby fix of timezone tooltip

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 {

src/components/views/right_panel/UserInfo.tsx

@@ -1409,24 +1409,30 @@ 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}
                     {timezoneInfo && (
-                        <Tooltip label={timezoneInfo?.timezone ?? ""}>
-                            <Flex align="center" className="mx_UserInfo_timezone">
-                                <Text size="sm" weight="regular">
-                                    {timezoneInfo?.friendly ?? ""}
-                                </Text>
-                            </Flex>
-                        </Tooltip>
+                        <Flex align="center" className="mx_UserInfo_timezone">
+                            <Text size="sm" weight="regular">
+                                <Tooltip label={timezoneInfo?.timezone ?? ""}>
+                                    <span>{timezoneInfo?.friendly ?? ""}</span>
+                                </Tooltip>
+                            </Text>
+                        </Flex>
+                    )}
+                    {userIdentifier && (
+                        <Text size="sm" weight="semibold" className="mx_UserInfo_profile_mxid">
+                            <CopyableText getTextToCopy={() => userIdentifier} border={false}>
+                                {userIdentifier}
+                            </CopyableText>
+                        </Text>
                     )}
-                    <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>