[MM-61800] Email is cut off in profile popover (#29753)

webapp/channels/src/components/profile_popover/profile_popover.scss

@@ -6,10 +6,13 @@
     z-index: 1070;
 }
 
+$profilePopoverWidth: 240px;
+$profilePopoverBorderWidth: 1px;
+
 .user-profile-popover {
-    width: 240px;
+    width: $profilePopoverWidth;
-    max-height: calc(100vh - 240px);
+    max-height: calc(100vh - $profilePopoverWidth);
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    border: $profilePopoverBorderWidth solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 4px;
     background: var(--center-channel-bg);
     box-shadow: var(--elevation-4);
@@ -17,8 +20,10 @@
 
     .user-profile-popover-title {
         display: flex;
+        max-width: calc($profilePopoverWidth - 40px);
         flex-wrap: nowrap;
         align-items: center;
+        justify-content: flex-start;
         justify-content: end;
         padding: 12px 8px 12px 8px;
 
@@ -103,7 +108,7 @@
             padding-inline-start: 16px;
             text-align: center;
 
-            >h5 {
+            >p {
                 margin: 0;
                 font-family: Metropolis, sans-serif;
                 font-size: 20px;
@@ -144,8 +149,9 @@
 
         .user-profile-popover__email {
             display: flex;
+            width: calc($profilePopoverWidth - (2 * $profilePopoverBorderWidth));
             align-items: center;
-            margin: 0 16px 10px 16px;
+            padding: 0 16px 10px 16px;
             justify-self: start;
 
             i.icon-email-outline {

webapp/channels/src/components/profile_popover/profile_popover_controller.tsx

@@ -21,13 +21,10 @@ import React, {useCallback, useState} from 'react';
 import type {Channel} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
 
-import {A11yClassNames} from 'utils/constants';
+import {A11yClassNames, OverlaysTimings, OverlayTransitionStyles, RootHtmlPortalId} from 'utils/constants';
 
 import ProfilePopover from './profile_popover';
 
-const PROFILE_POPOVER_OPENING_DELAY = 300;
-const PROFILE_POPOVER_CLOSING_DELAY = 500;
-
 interface Props<TriggerComponentType> {
 
     /**
@@ -90,17 +87,14 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
 
     const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, {
         duration: {
-            open: PROFILE_POPOVER_OPENING_DELAY,
+            open: OverlaysTimings.FADE_IN_DURATION,
-            close: PROFILE_POPOVER_CLOSING_DELAY,
+            close: OverlaysTimings.FADE_OUT_DURATION,
         },
+        initial: OverlayTransitionStyles.START,
     });
 
-    const combinedFloatingStyles = Object.assign({}, floatingStyles, transitionStyles);
-
     const clickInteractions = useClick(floatingContext);
-
     const dismissInteraction = useDismiss(floatingContext);
-
     const role = useRole(floatingContext);
 
     const {getReferenceProps, getFloatingProps} = useInteractions([
@@ -128,7 +122,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
             </TriggerComponent>
 
             {isMounted && (
-                <FloatingPortal id='root-portal'>
+                <FloatingPortal id={RootHtmlPortalId}>
                     <FloatingOverlay
                         id='user-profile-popover-floating-overlay'
                         className='user-profile-popover-floating-overlay'
@@ -137,7 +131,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
                         <FloatingFocusManager context={floatingContext}>
                             <div
                                 ref={refs.setFloating}
-                                style={combinedFloatingStyles}
+                                style={{...floatingStyles, ...transitionStyles}}
                                 className={classNames('user-profile-popover', A11yClassNames.POPUP)}
                                 {...getFloatingProps()}
                             >

webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx

@@ -34,7 +34,7 @@ const ProfilePopoverFullName = ({
             data-testid={`popover-fullname-${username}`}
             className='user-profile-popover__heading'
         >
-            <h5 title={fullname}>{fullname}</h5>
+            <p title={fullname}>{fullname}</p>
             {sharedIcon}
         </div>
     );

webapp/channels/src/utils/constants.tsx

@@ -2011,7 +2011,6 @@ export const Constants = {
     },
     OVERLAY_TIME_DELAY_SMALL: 100,
     OVERLAY_TIME_DELAY: 400,
-    OVERLAY_DEFAULT_TRIGGER: ['hover', 'focus'],
     PERMALINK_FADEOUT: 5000,
     DEFAULT_MAX_USERS_PER_TEAM: 50,
     DEFAULT_MAX_CHANNELS_PER_TEAM: 2000,
@@ -2233,5 +2232,23 @@ export const scheduledPosts = {
     SCHEDULED_POSTS: 'scheduled_posts',
 };
 
+/**
+ * This is the ID of the root portal container that is used to render modals and other components
+ * that need to be rendered outside of the main app container.
+ */
+export const RootHtmlPortalId = 'root-portal';
+
+export const OverlaysTimings = {
+    CURSOR_REST_TIME_BEFORE_OPEN: 400, // in ms
+    FADE_IN_DURATION: 250, // in ms
+    FADE_OUT_DURATION: 150, // in ms
+};
+
+export const OverlayTransitionStyles = {
+    START: {
+        opacity: 0,
+    },
+};
+
 export default Constants;