fix: Links field fixes (#5565)

Related issue: #3607

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-import styled from '@emotion/styled';
 
 import { FieldLinkValue } from '@/object-record/record-field/types/FieldMetadata';
 import { RoundedLink } from '@/ui/navigation/link/components/RoundedLink';
@@ -11,15 +10,6 @@ import { checkUrlType } from '~/utils/checkUrlType';
 import { getAbsoluteUrl } from '~/utils/url/getAbsoluteUrl';
 import { getUrlHostName } from '~/utils/url/getUrlHostName';
 
-import { EllipsisDisplay } from './EllipsisDisplay';
-
-const StyledRawLink = styled(RoundedLink)`
-  a {
-    font-size: ${({ theme }) => theme.font.size.md};
-    white-space: nowrap;
-  }
-`;
-
 type LinkDisplayProps = {
   value?: FieldLinkValue;
 };
@@ -35,18 +25,15 @@ export const LinkDisplay = ({ value }: LinkDisplayProps) => {
 
   if (type === LinkType.LinkedIn || type === LinkType.Twitter) {
     return (
-      <EllipsisDisplay>
-        <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
-          {displayedValue}
-        </SocialLink>
-      </EllipsisDisplay>
+      <SocialLink href={absoluteUrl} onClick={handleClick} type={type}>
+        {displayedValue}
+      </SocialLink>
     );
   }
+
   return (
-    <EllipsisDisplay>
-      <StyledRawLink href={absoluteUrl} onClick={handleClick}>
-        {displayedValue}
-      </StyledRawLink>
-    </EllipsisDisplay>
+    <RoundedLink href={absoluteUrl} onClick={handleClick}>
+      {displayedValue}
+    </RoundedLink>
   );
 };

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

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx

@@ -19,26 +19,30 @@ export type MenuItemIconButton = {
 };
 
 export type MenuItemProps = {
-  LeftIcon?: IconComponent | null;
   accent?: MenuItemAccent;
-  text: ReactNode;
+  className?: string;
   iconButtons?: MenuItemIconButton[];
   isIconDisplayedOnHoverOnly?: boolean;
   isTooltipOpen?: boolean;
-  className?: string;
-  testId?: string;
+  LeftIcon?: IconComponent | null;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
+  testId?: string;
+  text: ReactNode;
 };
 
 export const MenuItem = ({
-  LeftIcon,
   accent = 'default',
-  text,
+  className,
   iconButtons,
   isIconDisplayedOnHoverOnly = true,
-  className,
-  testId,
+  LeftIcon,
   onClick,
+  onMouseEnter,
+  onMouseLeave,
+  testId,
+  text,
 }: MenuItemProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
@@ -57,6 +61,8 @@ export const MenuItem = ({
       className={className}
       accent={accent}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <StyledMenuItemLeftContent>
         <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />