Change ExternalLink display style

1 files changed, 7 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
index 2600fc13b5..0acba13623 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExternalLink.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import styled from 'styled-components';
 
 import { Url } from '../../shared/constants';
 import { useAppContext } from '../context';
@@ -8,6 +9,11 @@ export type ExternalLinkProps = Omit<LinkProps<'a'>, 'href' | 'as'> & {
   to: Url;
 };
 
+const StyledLink = styled(Link)`
+  display: inline-flex;
+  width: fit-content;
+`;
+
 function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
   const { openUrl } = useAppContext();
   const navigate = useCallback(
@@ -20,7 +26,7 @@ function ExternalLink({ to, onClick, ...props }: ExternalLinkProps) {
     },
     [onClick, openUrl, to],
   );
-  return <Link href="" onClick={navigate} {...props} />;
+  return <StyledLink href="" onClick={navigate} {...props} />;
 }
 
 const ExternalLinkNamespace = Object.assign(ExternalLink, {