feat: display Links field as Expandable List (#5374)

Closes #5114

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

@@ -10,22 +10,15 @@ type RoundedLinkProps = {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
-const StyledClickable = styled.div`
-  overflow: hidden;
-  white-space: nowrap;
-
-  a {
-    color: inherit;
-    overflow: hidden;
-    text-decoration: none;
-    text-overflow: ellipsis;
-  }
+const StyledLink = styled(ReactLink)`
+  max-width: 100%;
 `;
 
 const StyledChip = styled(Chip)`
   border-color: ${({ theme }) => theme.border.color.strong};
   box-sizing: border-box;
   padding: ${({ theme }) => theme.spacing(2)};
+  max-width: 100%;
 `;
 
 export const RoundedLink = ({
@@ -33,20 +26,21 @@ export const RoundedLink = ({
   className,
   href,
   onClick,
-}: RoundedLinkProps) => (
-  <div>
-    {children !== '' ? (
-      <StyledClickable className={className}>
-        <ReactLink target="_blank" to={href} onClick={onClick}>
-          <StyledChip
-            label={`${children}`}
-            variant={ChipVariant.Rounded}
-            size={ChipSize.Small}
-          />
-        </ReactLink>
-      </StyledClickable>
-    ) : (
-      <></>
-    )}
-  </div>
-);
+}: RoundedLinkProps) => {
+  if (!children) return null;
+
+  return (
+    <StyledLink
+      className={className}
+      target="_blank"
+      to={href}
+      onClick={onClick}
+    >
+      <StyledChip
+        label={`${children}`}
+        variant={ChipVariant.Rounded}
+        size={ChipSize.Small}
+      />
+    </StyledLink>
+  );
+};