From a79f7a4531a71a81c75798d4ee48792b76d42d5b Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 29 Mar 2023 15:43:05 +0200
Subject: [PATCH] fix(ui) - flag height

---
 .../Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js      | 2 +-
 frontend/app/components/ui/CountryFlag/CountryFlag.js         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
index e6893ca3e..ef80fd0bf 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@@ -79,7 +79,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
                             render={() => (
                                 <div className="text-left bg-white">
                                     <SessionInfoItem
-                                        comp={<CountryFlag country={userCountry} />}
+                                        comp={<CountryFlag country={userCountry} height={11} />}
                                         label={countries[userCountry]}
                                         value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span>}
                                     />
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js
index 09192f070..4e4ba4cba 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -4,7 +4,7 @@ import { countries } from 'App/constants';
 import { Icon } from 'UI';
 import stl from './countryFlag.module.css';
 
-const CountryFlag = ({ country = '', className = '', style = {}, label = false }) => {
+const CountryFlag = ({ country = '', className = '', style = {}, label = false, width = 22, height = 15}) => {
 	const knownCountry = !!country && country !== 'UN';
   	const countryFlag = knownCountry ? country.toLowerCase() : '';
   	const countryName = knownCountry ? countries[ country ] : 'Unknown Country';
@@ -12,7 +12,7 @@ const CountryFlag = ({ country = '', className = '', style = {}, label = false }
 	return (
 		<div className="flex items-center" style={style}>
 			{knownCountry
-				?  <div className={ cn(`flag flag-${ countryFlag }`, className, stl.default) } />
+				?  <div className={ cn(`flag flag-${ countryFlag }`, className) } style={{ width: `${width}px`, height: `${height}px` }} />
 				: (
 					<div className="flex items-center w-full">
 						<Icon name="flag-na" size="22" className="" />