fix: Links field fixes (#5565)

Related issue: #3607

packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx

@@ -11,14 +11,18 @@ type RoundedLinkProps = {
 };
 
 const StyledLink = styled(ReactLink)`
+  font-size: ${({ theme }) => theme.font.size.md};
   max-width: 100%;
+  height: ${({ theme }) => theme.spacing(5)};
 `;
 
 const StyledChip = styled(Chip)`
   border-color: ${({ theme }) => theme.border.color.strong};
   box-sizing: border-box;
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(0, 2)};
   max-width: 100%;
+  height: ${({ theme }) => theme.spacing(5)};
+  min-width: 40px;
 `;
 
 export const RoundedLink = ({
@@ -39,7 +43,7 @@ export const RoundedLink = ({
       <StyledChip
         label={`${children}`}
         variant={ChipVariant.Rounded}
-        size={ChipSize.Small}
+        size={ChipSize.Large}
       />
     </StyledLink>
   );

packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 
 import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
 
@@ -18,16 +17,6 @@ type SocialLinkProps = {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
-const StyledRawLink = styled(RoundedLink)`
-  overflow: hidden;
-
-  a {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
 export const SocialLink = ({
   children,
   href,
@@ -38,8 +27,8 @@ export const SocialLink = ({
     getDisplayValueByUrlType({ type: type, href: href }) ?? children;
 
   return (
-    <StyledRawLink href={href} onClick={onClick}>
+    <RoundedLink href={href} onClick={onClick}>
       {displayValue}
-    </StyledRawLink>
+    </RoundedLink>
   );
 };