fix(ui) - text overflow in player header

frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SlideModal, Avatar, Icon } from 'UI';
+import { SlideModal, Avatar, TextEllipsis, Icon } from 'UI';
 import SessionList from '../SessionList';
 import stl from './assistTabs.css'
 
@@ -19,7 +19,11 @@ const AssistTabs = (props: Props) => {
             <div className="flex items-center mr-3">
               {/* <Icon name="user-alt" color="gray-darkest" /> */}
               <Avatar iconSize="20" width="30px" height="30px" seed={ props.userNumericHash } />
-              <div className="ml-2 font-medium">{props.userId}'s</div>
+              <div className="ml-2 font-medium">
+                <TextEllipsis maxWidth={120} inverted popupProps={{ inverted: true, size: 'tiny' }}>
+                  {props.userId}'s asdasd asdasdasdasd
+                </TextEllipsis>
+              </div>
             </div>
             <div
               className={stl.btnLink}

frontend/app/components/Session_/PlayerBlockHeader.js

@@ -139,7 +139,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
             
             { _live && (
               <>
-                <SessionMetaList className="" metaList={_metaList} />
+                <SessionMetaList className="" metaList={_metaList} maxLength={3} />
                 <div className={ stl.divider } />
               </>
             )}

frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx

@@ -6,19 +6,20 @@ import MetaMoreButton from '../MetaMoreButton';
 
 interface Props {
   className?: string,
-  metaList: []
+  metaList: [],
+  maxLength?: number,
 }
-const MAX_LENGTH = 4;
+
 export default function SessionMetaList(props: Props) {
-  const { className = '', metaList } = props
+  const { className = '', metaList, maxLength = 4 } = props
   return (
     <div className={cn("text-sm flex items-start", className)}>
-      {metaList.slice(0, MAX_LENGTH).map(({ label, value }, index) => (
+      {metaList.slice(0, maxLength).map(({ label, value }, index) => (
         <MetaItem key={index} label={label} value={''+value} className="mr-3" />
       ))}
 
-      {metaList.length > MAX_LENGTH && (
-        <MetaMoreButton list={metaList} maxLength={MAX_LENGTH} />
+      {metaList.length > maxLength && (
+        <MetaMoreButton list={metaList} maxLength={maxLength} />
       )}
     </div>
   )