From 58b8e8afee6ca00729cfe51af435ed9d695bcf6e Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Wed, 29 Jul 2026 17:24:45 +0200 Subject: [PATCH] Fix clipped New chat button label in localized navigation drawer (#23511) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #23503 Capture d’écran 2026-07-29 à 17 20 25 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. --- .../navigation/components/MainNavigationDrawerTabsRow.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index f5985ce393..e282748ace 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -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`