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

Fix clipped New chat button label in localized navigation drawer (#23511)

Browse Source 
Fixes #23503

<img width="161" height="76" alt="Capture d’écran 2026-07-29 à 17 20
25"
src="https://github.com/user-attachments/assets/a6ea0a12-b91d-419f-8023-8e65d5dce65b"
/>

The expanded "New chat" button had a hardcoded `width: 103px`, sized for
the English label. Localized labels ("Neuer Chat", "Nouveau chat") were
clipped, since `OverflowingTextWithTooltip` can only truncate inside a
parent it cannot resize.

The expanded wrapper is now `width: max-content` with `max-width: 100%`,
so it grows with the label and only truncates (with tooltip) when the
sidebar has no space left. `min-width` keeps the pill from collapsing
below icon size. Collapsed state is unchanged.

### Verified locally (German locale)

| | wrapper width | label |
|---|---|---|
| before | 103px (fixed) | `Neuer C...` clipped |
| after | 109px (max-content) | `Neuer Chat` in full |

- English: 103px -> 98px, visually identical.
- Collapsed drawer: still exactly 24x24, unchanged.
- Very long label (Vietnamese-length): wrapper stops at the sidebar
edge, no overflow, label truncates with tooltip.
This commit is contained in:
Thomas Trompette
2026-07-29 17:24:45 +02:00
committed by GitHub
parent 8707ebb7ac
commit 58b8e8afee
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+4 -1
View File
@@ -102,13 +102,16 @@ const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
height: ${({ isExpanded }) =>
isExpanded ? themeCssVariables.spacing[7] : themeCssVariables.spacing[6]};
justify-content: center;
max-width: 100%;
min-width: ${({ isExpanded }) =>
isExpanded ? themeCssVariables.spacing[7] : themeCssVariables.spacing[6]};
padding: ${({ isExpanded }) =>
isExpanded ? '3px' : themeCssVariables.spacing[0.5]};
transition:
height calc(${themeCssVariables.animation.duration.normal} * 1s) ease,
padding calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
width: ${({ isExpanded }) =>
isExpanded ? '103px' : themeCssVariables.spacing[6]};
isExpanded ? 'max-content' : themeCssVariables.spacing[6]};
`;
const StyledNewChatButton = styled.div`