From fb38828943a9ce1fc908a276f19d693adcdb151e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 27 Feb 2025 12:38:30 +0100
Subject: [PATCH] Fix command menu list item overflow (#10544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before:
<img width="501" alt="Capture d’écran 2025-02-27 à 12 10 52"
src="https://github.com/user-attachments/assets/dd3637b4-cfe4-44b9-8db2-78e14741a415"
/>

After:
<img width="503" alt="Capture d’écran 2025-02-27 à 12 10 40"
src="https://github.com/user-attachments/assets/71ebb02d-cdc8-44e6-82dd-d00b3a45e7c0"
/>
---
 .../navigation/menu-item/components/MenuItemCommand.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
index 769c2f09a..b6e3f0f5d 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
@@ -6,7 +6,7 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { IconComponent } from '@ui/display';
+import { IconComponent, OverflowingTextWithTooltip } from '@ui/display';
 import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile';
 import { ReactNode } from 'react';
 import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys';
@@ -75,6 +75,7 @@ const StyledDescription = styled.span`
 const StyledTextContainer = styled.div`
   display: flex;
   flex-direction: row;
+  max-width: calc(100% - 2 * var(--horizontal-padding));
 `;
 
 export type MenuItemCommandProps = {
@@ -114,7 +115,9 @@ export const MenuItemCommand = ({
           </StyledBigIconContainer>
         )}
         <StyledTextContainer>
-          <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
+          <StyledMenuItemLabelText>
+            <OverflowingTextWithTooltip text={text} />
+          </StyledMenuItemLabelText>
           {description && <StyledDescription>{description}</StyledDescription>}
         </StyledTextContainer>
         {RightComponent}