Fix device info in main header overflowing with long text

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>
   );
 };