diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx index 3af5718bbf..f1a52371c9 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx @@ -17,6 +17,10 @@ const StyledDeviceLabel = styled(FootnoteMini)({ textOverflow: 'ellipsis', }); +const StyledFlex = styled(Flex)({ + width: '100%', +}); + export const AppMainHeaderDeviceInfo = () => { const deviceName = useSelector((state) => state.account.deviceName); const accountExpiry = useSelector((state) => state.account.expiry); @@ -28,7 +32,7 @@ export const AppMainHeaderDeviceInfo = () => { : ''; return ( - <Flex $gap="large" $margin={{ top: 'tiny' }}> + <StyledFlex $gap="large" $margin={{ top: 'tiny' }}> <StyledDeviceLabel color="whiteAlpha80"> {sprintf( // TRANSLATORS: A label that will display the newly created device name to inform the user @@ -48,6 +52,6 @@ export const AppMainHeaderDeviceInfo = () => { })} </StyledTimeLeftLabel> )} - </Flex> + </StyledFlex> ); }; |