From 236227f2fb68a9f436acb4f67f9450067f8b3c19 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 4 Jul 2023 15:41:40 +0200
Subject: [PATCH] fix(ui): country flag in replayer

---
 .../app/components/shared/SessionItem/SessionItem.tsx     | 2 +-
 frontend/app/components/ui/CountryFlag/CountryFlag.tsx    | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index a1312428b..e1926813d 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} label />
+                <CountryFlag userCity={userCity} userState={userState} country={userCountry} showLabel={true} />
               </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.tsx b/frontend/app/components/ui/CountryFlag/CountryFlag.tsx
index 71cc187b8..3e8e087e3 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.tsx
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.tsx
@@ -12,6 +12,7 @@ interface CountryFlagProps {
   style?: CSSProperties;
   width?: number;
   height?: number;
+  showLabel?: boolean;
 }
 
 
@@ -22,7 +23,8 @@ const CountryFlag: FC<CountryFlagProps> = ({
                                              className = '',
                                              style = {},
                                              width = 22,
-                                             height = 15
+                                             height = 15,
+                                             showLabel = false,
                                            }) => {
   const knownCountry = !!country && country !== 'UN';
   const countryFlag = knownCountry ? country.toLowerCase() : '';
@@ -54,14 +56,14 @@ const CountryFlag: FC<CountryFlagProps> = ({
       {knownCountry ? (
         <Tooltip title={fullGeoInfo} mouseEnterDelay={0.5}>
           <div
-            className={cn(`flag flag-${countryFlag}`, className)}
+            className={cn(`flag flag-${countryFlag} flex-shrink-0`, className)}
             style={{ width: `${width}px`, height: `${height}px` }}
           />
         </Tooltip>
       ) : (
         renderUnknownCountry
       )}
-      {renderGeoInfo}
+      {showLabel && renderGeoInfo}
     </div>
   );
 };