From 0b176c39e8135778250bf2ac6ce1c64f7dba09db Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 20 Jul 2022 11:07:12 +0200
Subject: [PATCH] fix(ui) - session item user name width

---
 .../app/components/shared/SessionItem/SessionItem.tsx     | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index aa5cd479d..17b8122c3 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -109,7 +109,7 @@ function SessionItem(props: RouteComponentProps & Props) {
     <div className={ cn(stl.sessionItem, "flex flex-col p-2") } id="session-item" onClick={(e) => e.stopPropagation()}>
         <div className="flex items-start">
           <div className={ cn('flex items-center w-full')}>
-            <div className="flex items-center pr-2" style={{ width: "30%"}}>
+            <div className="flex items-center pr-2 shrink-0" style={{ width: "40%"}}>
               <div><Avatar isActive={active} seed={ userNumericHash } isAssist={isAssist} /></div>
               <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
                 <div
@@ -120,8 +120,10 @@ function SessionItem(props: RouteComponentProps & Props) {
                 </div>
               </div>
             </div>
-            <div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
-              <div>{formatTimeOrDate(startedAt, timezone) }</div>
+            <div style={{ width: "20%" }} className="px-2 flex flex-col justify-between">
+              <div>
+                <TextEllipsis text={formatTimeOrDate(startedAt, timezone)} popupProps={{ inverted: true, size: 'tiny' }} />
+              </div>
               <div className="flex items-center color-gray-medium py-1">
                 {!isAssist && (
                     <>