From ec459d8dc834e1d7dd96b80d931d61e523cd70a6 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 24 Mar 2026 18:35:59 +0530
Subject: [PATCH] Fix cropped view/link overlay icons in collapsed navigation
 sidebar (#18883)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="45" height="670" alt="Screenshot 2026-03-24 at 8 46 31 AM"
src="https://github.com/user-attachments/assets/6eba1854-c279-46d8-a0d0-3034a41a3ce8"
/>

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---
 .../components/MainNavigationDrawerTabsRow.tsx   |  2 +-
 .../components/NavigationDrawerSection.tsx       | 16 +++++++++++++---
 2 files changed, 14 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 c10f31b0b6..65db82302f 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
@@ -31,7 +31,7 @@ const StyledRow = styled.div<{ isExpanded: boolean }>`
   justify-content: ${({ isExpanded }) =>
     isExpanded ? 'space-between' : 'center'};
   transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
-  width: 100%;
+  width: ${({ isExpanded }) => (isExpanded ? '100%' : 'max-content')};
 `;
 
 const StyledTabsPill = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
index 782436a3af..1b66714ad6 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
@@ -1,7 +1,9 @@
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
-import { useIsMobile } from 'twenty-ui/utilities';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 const StyledSection = styled.div<{ isSettingsDrawer?: boolean }>`
   margin-bottom: ${({ isSettingsDrawer }) =>
@@ -12,12 +14,13 @@ const StyledSection = styled.div<{ isSettingsDrawer?: boolean }>`
 const StyledSectionInnerContainerMinusScrollPadding = styled.div<{
   isMobile: boolean;
   isSettingsDrawer: boolean;
+  isMainNavCollapsed: boolean;
 }>`
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.betweenSiblingsGap};
-  width: ${({ isMobile, isSettingsDrawer }) =>
-    isMobile || isSettingsDrawer
+  width: ${({ isMobile, isSettingsDrawer, isMainNavCollapsed }) =>
+    isMobile || isSettingsDrawer || isMainNavCollapsed
       ? '100%'
       : `calc(100% - ${themeCssVariables.spacing[2]})`};
 `;
@@ -31,11 +34,18 @@ export const NavigationDrawerSection = ({
 }) => {
   const isMobile = useIsMobile();
   const isSettingsDrawer = useIsSettingsDrawer();
+  const isNavigationDrawerExpanded = useAtomStateValue(
+    isNavigationDrawerExpandedState,
+  );
+  const isMainNavCollapsed =
+    !isSettingsDrawer && !isMobile && !isNavigationDrawerExpanded;
+
   return (
     <StyledSection isSettingsDrawer={isSettingsDrawer} className={className}>
       <StyledSectionInnerContainerMinusScrollPadding
         isMobile={isMobile}
         isSettingsDrawer={isSettingsDrawer}
+        isMainNavCollapsed={isMainNavCollapsed}
       >
         {children}
       </StyledSectionInnerContainerMinusScrollPadding>