Command menu overflow ellipsis (#10977)

Fixes https://github.com/twentyhq/core-team-issues/issues/579

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
+import { OverflowingTextWithTooltip } from '@ui/display';
 import { Fragment } from 'react/jsx-runtime';
 import { isDefined } from 'twenty-shared';
 
 const StyledChip = styled.button<{
   withText: boolean;
+  maxWidth?: string;
   onClick?: () => void;
 }>`
   all: unset;
@@ -33,6 +35,7 @@ const StyledChip = styled.button<{
         ? theme.background.transparent.medium
         : theme.background.transparent.light};
   }
+  max-width: ${({ maxWidth }) => maxWidth};
 `;
 
 const StyledIconsContainer = styled.div`
@@ -45,6 +48,7 @@ export type CommandMenuContextChipProps = {
   text?: string;
   onClick?: () => void;
   testId?: string;
+  maxWidth?: string;
 };
 
 export const CommandMenuContextChip = ({
@@ -52,19 +56,21 @@ export const CommandMenuContextChip = ({
   text,
   onClick,
   testId,
+  maxWidth,
 }: CommandMenuContextChipProps) => {
   return (
     <StyledChip
       withText={isNonEmptyString(text)}
       onClick={onClick}
       data-testid={testId}
+      maxWidth={maxWidth}
     >
       <StyledIconsContainer>
         {Icons.map((Icon, index) => (
           <Fragment key={index}>{Icon}</Fragment>
         ))}
       </StyledIconsContainer>
-      {text && <span>{text}</span>}
+      {text && <OverflowingTextWithTooltip text={text} />}
     </StyledChip>
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx

@@ -27,6 +27,7 @@ export const CommandMenuContextChipGroups = ({
         {contextChips.map((chip, index) => (
           <CommandMenuContextChip
             key={index}
+            maxWidth={'180px'}
             Icons={chip.Icons}
             text={chip.text}
             onClick={chip.onClick}
@@ -79,6 +80,7 @@ export const CommandMenuContextChipGroups = ({
           Icons={lastChip.Icons}
           text={lastChip.text}
           onClick={lastChip.onClick}
+          maxWidth={'180px'}
         />
       )}
     </>