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 {