admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix command menu list item overflow (#10544)

Browse Source 
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"
/>
This commit is contained in:
Raphaël Bosi
2025-02-27 12:38:30 +01:00
committed by GitHub
parent d9e6b95c04
commit fb38828943
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
View File

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