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:
parent
eec1f14512
commit
6471434d81
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user