From 6255207aa39bfd951898af7eeb2bf97312a4ab48 Mon Sep 17 00:00:00 2001
From: Guillim <guillim@users.noreply.github.com>
Date: Tue, 18 Mar 2025 14:21:47 +0100
Subject: [PATCH] Command menu overflow ellipsis (#10977)

Fixes https://github.com/twentyhq/core-team-issues/issues/579
---
 .../command-menu/components/CommandMenuContextChip.tsx    | 8 +++++++-
 .../components/CommandMenuContextChipGroups.tsx           | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
index fc4836274..34842186d 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx
+++ b/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>
   );
 };
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
index efc2b2909..96fc3613c 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx
+++ b/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'}
         />
       )}
     </>