From 037366e9e7fb90fb0012906922589cbbbc8000d4 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 22 Jun 2023 15:36:01 +0200
Subject: [PATCH] change(ui): session list country flag alignment, city trim

---
 .../app/components/shared/SessionItem/SessionItem.tsx |  2 +-
 frontend/app/components/ui/CountryFlag/CountryFlag.js | 11 +++++++++--
 .../app/components/ui/TextEllipsis/TextEllipsis.js    |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index a842be074..a1312428b 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -222,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
             </div>
             <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
               <div style={{ height: '21px' }}>
-                <CountryFlag userCity={userCity} userState={userState} country={userCountry} style={{ paddingTop: '4px' }} label />
+                <CountryFlag userCity={userCity} userState={userState} country={userCountry} label />
               </div>
               <div className="color-gray-medium flex items-center py-1">
                 <span className="capitalize" style={{ maxWidth: '70px' }}>
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js
index 8b04d2ba1..422d5504d 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { Icon } from 'UI';
+import { Icon, TextEllipsis } from 'UI';
 
 const CountryFlag = ({
   userCity = '',
@@ -28,7 +28,14 @@ const CountryFlag = ({
           </div>
         </div>
       )}
-      {userCity && <span className="mx-1">{userCity}</span>}
+      {userCity && (
+        <span className="mx-1">
+          <TextEllipsis
+            text={userCity}
+            maxWidth="150px"
+          />
+        </span>
+      )}
     </div>
   );
 };
diff --git a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
index 7cd51e39f..1eab52c21 100644
--- a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
+++ b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useState, useRef, useEffect, forwardRef } from 'react';
 import cn from 'classnames';
-import { Tooltip } from 'UI';
+import { Tooltip } from 'antd';
 import styles from './textEllipsis.module.css';
 
 /** calculates text width in pixels