[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"
/>

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>