fix: long email and handle in user tooltip

ref issue #3842

Author: Maksym Mykhailenko

src/components/User/UserTooltip.jsx

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
 import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar'
 import { DOMAIN } from '../../config/constants'
@@ -53,7 +54,7 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, showEmailOnly
               </span>
             )}
           </div>
-          <div className="tt-col-user-data">
+          <div className={cn('tt-col-user-data', { 'with-invite-label': invitedLabel })}>
             {!showEmailOnly && <div className="user-name-container">
               <span>{userFullName}</span>
             </div>}

src/components/User/UserTooltip.scss

@@ -127,12 +127,14 @@
               display: flex;
               flex-wrap: wrap;
               align-content: flex-start;
-              position: relative;
-              width: 80%;
+              overflow: hidden;
             }
 
             .user-name-container {
-              flex: 1 0 90%;
+              flex: 1 1 100%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
 
               span {
                 font-size: 15px;
@@ -143,8 +145,10 @@
             }
 
             .user-handle-container {
-              padding-right: 10px;
               height: 20px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
 
               &.with-email {
                 border-right: 1px solid $tc-gray-50;
@@ -163,7 +167,6 @@
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
-              max-width: 80%;
 
               a {
                 font-size: 12px;
@@ -186,6 +189,11 @@
                 }
               }
             }
+
+            .tt-col-user-data.with-invite-label .user-name-container,
+            .tt-col-user-data.with-invite-label .user-email-container.text-dark {
+              margin-right: 75px;
+            }
           }
 
           .sf-data-bottom-container {