From 29979f535dc403eafda1b19818028b55df98c7f4 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 26 Mar 2026 16:05:33 +0530
Subject: [PATCH] [Ai] fix overflow on new chat button (#18996)

before -

<img width="368" height="220" alt="CleanShot 2026-03-26 at 15 38 38"
src="https://github.com/user-attachments/assets/c3a87ffd-bd84-408e-b2fb-fd4ce3ce8d61"
/>


after -

<img width="418" height="274" alt="CleanShot 2026-03-26 at 15 37 59"
src="https://github.com/user-attachments/assets/04d462c4-3cbc-4f9f-9ed5-8b90ae1f112c"
/>
---
 .../MainNavigationDrawerTabsRow.tsx           | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
index 65db82302f..f5ced25db9 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
@@ -4,6 +4,7 @@ import {
   IconComment,
   IconHome,
   IconMessageCirclePlus,
+  OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useIsMobile } from 'twenty-ui/utilities';
@@ -41,6 +42,7 @@ const StyledTabsPill = styled.div`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   gap: ${themeCssVariables.spacing[0.5]};
   height: ${themeCssVariables.spacing[7]};
   padding: 3px;
@@ -78,6 +80,14 @@ const StyledTabIcon = styled.div`
   width: ${themeCssVariables.spacing[5]};
 `;
 
+const StyledNewChatIcon = styled.div`
+  align-items: center;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+`;
+
 const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
   align-items: center;
   background: ${themeCssVariables.background.secondary};
@@ -108,6 +118,9 @@ const StyledNewChatButton = styled.div`
   gap: ${themeCssVariables.spacing[1]};
   height: 100%;
   justify-content: center;
+  min-width: 0;
+  overflow: hidden;
+  padding-inline: ${themeCssVariables.spacing[1]};
   transition:
     background calc(${themeCssVariables.animation.duration.fast} * 1s) ease,
     color calc(${themeCssVariables.animation.duration.fast} * 1s) ease;
@@ -194,7 +207,7 @@ export const MainNavigationDrawerTabsRow = () => {
           >
             <StyledTabIcon>
               <IconHome
-                size={theme.icon.size.sm}
+                size={theme.icon.size.md}
                 color={getTabIconColor(
                   navigationDrawerActiveTab ===
                     NAVIGATION_DRAWER_TABS.NAVIGATION_MENU,
@@ -224,7 +237,7 @@ export const MainNavigationDrawerTabsRow = () => {
           >
             <StyledTabIcon>
               <IconComment
-                size={theme.icon.size.sm}
+                size={theme.icon.size.md}
                 color={getTabIconColor(
                   navigationDrawerActiveTab ===
                     NAVIGATION_DRAWER_TABS.AI_CHAT_HISTORY,
@@ -242,8 +255,10 @@ export const MainNavigationDrawerTabsRow = () => {
           onClick={handleNewChatClick}
           onKeyDown={handleNewChatKeyDown}
         >
-          <IconMessageCirclePlus size={theme.icon.size.md} />
-          {isExpanded && t`New chat`}
+          <StyledNewChatIcon>
+            <IconMessageCirclePlus size={theme.icon.size.md} />
+          </StyledNewChatIcon>
+          {isExpanded && <OverflowingTextWithTooltip text={t`New chat`} />}
         </StyledNewChatButton>
       </StyledNewChatButtonWrapper>
     </StyledRow>