Update CountryDisplay component to improve layout consistency

- Added minWidth style to Flex and inner div elements to ensure proper alignment and prevent overflow issues in the CountryDisplay component.
This commit is contained in:
Tom Butcher 2026-07-25 01:35:35 +01:00
parent eec1f14512
commit 6471434d81

View File

@ -13,14 +13,19 @@ const CountryDisplay = ({ countryCode }) => {
} }
return ( return (
<Flex gap={'small'} align='center' className='country-display'> <Flex
gap={'small'}
align='center'
className='country-display'
style={{ minWidth: 0 }}
>
<Flag <Flag
code={country.code} code={country.code}
size='middle' size='middle'
hasBorder={true} hasBorder={true}
borderRadius={5} borderRadius={5}
/> />
<div> <div style={{ minWidth: 0 }}>
<Text ellipsis>{country.name}</Text> <Text ellipsis>{country.name}</Text>
</div> </div>
</Flex> </Flex>