From 6419b3013681b9714967c97e0c2972c731ec904d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 25 Feb 2022 13:27:47 +0100
Subject: [PATCH 1/2] fix(ui) - text overflow in player header

---
 .../Assist/components/AssistTabs/AssistTabs.tsx     |  8 ++++++--
 .../app/components/Session_/PlayerBlockHeader.js    |  2 +-
 .../SessionItem/SessionMetaList/SessionMetaList.tsx | 13 +++++++------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx b/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
index 07af99e24..539c2d8d1 100644
--- a/frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
+++ b/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}
diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js
index 1a0735f5f..c29fc3085 100644
--- a/frontend/app/components/Session_/PlayerBlockHeader.js
+++ b/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 } />
               </>
             )}
diff --git a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx b/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
index d43f920c7..8b0e77ed5 100644
--- a/frontend/app/components/shared/SessionItem/SessionMetaList/SessionMetaList.tsx
+++ b/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>
   )

From 2e33398efa24abf3cb7926de838b5f5a4e7287f3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 25 Feb 2022 13:29:01 +0100
Subject: [PATCH 2/2] fix(ui) - loadmore button bottom padding

---
 .../app/components/shared/LiveSessionList/LiveSessionList.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index 8ffd256bd..cb503a745 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -161,7 +161,7 @@ function LiveSessionList(props: Props) {
           ))}
 
           <LoadMoreButton
-            className="mt-3"
+            className="my-6"
             displayedCount={displayedCount}
             totalCount={sessions.size}
             onClick={addPage}