diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
index da9d151313bb..3f54079faf2c 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
@@ -60,7 +60,6 @@ export const MainNavigationDrawerItems = () => {
contextProviderName="navigationDrawer"
componentInstanceId={`scroll-wrapper-navigation-drawer`}
defaultEnableXScroll={false}
- scrollHide={true}
>
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index aec9e0fdefe9..9bc673a5df22 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -80,15 +80,16 @@ const StyledItem = styled('button', {
padding-right: ${({ theme }) => theme.spacing(0.5)};
padding-top: ${({ theme }) => theme.spacing(1)};
- margin-top: ${({ indentationLevel }) =>
- indentationLevel === 2 ? '2px' : '0'};
+ margin-top: ${({ indentationLevel, theme }) =>
+ indentationLevel === 2 ? theme.spacing(0.5) : '0'};
pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
width: ${(props) =>
!props.isNavigationDrawerExpanded
? `${NAV_DRAWER_WIDTHS.menu.desktop.collapsed - 24}px`
- : '100%'};
+ : `${NAV_DRAWER_WIDTHS.menu.desktop.expanded - 34}px`};
+
${({ isDragging }) =>
isDragging &&
`
@@ -115,13 +116,19 @@ const StyledItemElementsContainer = styled.span`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
+ min-width: 0;
width: 100%;
+
+ & > span:nth-of-type(1) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ word-wrap: break-word;
+ }
`;
const StyledItemLabel = styled.span`
font-weight: ${({ theme }) => theme.font.weight.medium};
- text-overflow: ellipsis;
- white-space: nowrap;
`;
const StyledItemCount = styled.span`
@@ -251,7 +258,7 @@ export const NavigationDrawerItem = ({
{label}
-
+ {(soon || count || keyboard || rightOptions) && }
{soon && (
@@ -272,8 +279,9 @@ export const NavigationDrawerItem = ({
)}
-
- {rightOptions && (
+
+ {rightOptions && (
+
{rightOptions}
- )}
-
+
+ )}
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
index 0711b54b876d..7ddd54437f9e 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
@@ -21,6 +21,7 @@ const StyledTitle = styled.div`
padding-right: ${({ theme }) => theme.spacing(0.5)};
padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
+ margin-right: ${({ theme }) => theme.spacing(2.5)};
justify-content: space-between;
&:hover {