Fixing issue of scroll paddings in Navigation Drawer

twentyhq · Dec 18, 2024 · 6a8006b · 6a8006b
1 parent 7375ab8
commit 6a8006b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git 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}
       >
         <NavigationDrawerOpenedSection />
         <CurrentWorkspaceMemberFavoritesFolders />

diff --git a/...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/...nty-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 = ({
             <StyledItemLabel>{label}</StyledItemLabel>
           </NavigationDrawerAnimatedCollapseWrapper>
 
-          <StyledSpacer />
+          {(soon || count || keyboard || rightOptions) && <StyledSpacer />}
 
           {soon && (
             <NavigationDrawerAnimatedCollapseWrapper>
@@ -272,8 +279,9 @@ export const NavigationDrawerItem = ({
               </StyledKeyBoardShortcut>
             </NavigationDrawerAnimatedCollapseWrapper>
           )}
-          <NavigationDrawerAnimatedCollapseWrapper>
-            {rightOptions && (
+
+          {rightOptions && (
+            <NavigationDrawerAnimatedCollapseWrapper>
               <StyledRightOptionsContainer
                 isMobile={isMobile}
                 active={active || false}
@@ -284,8 +292,8 @@ export const NavigationDrawerItem = ({
               >
                 {rightOptions}
               </StyledRightOptionsContainer>
-            )}
-          </NavigationDrawerAnimatedCollapseWrapper>
+            </NavigationDrawerAnimatedCollapseWrapper>
+          )}
         </StyledItemElementsContainer>
       </StyledItem>
     </StyledNavigationDrawerItemContainer>

diff --git a/...t/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/...t/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 {