[Navigation Drawer] Multiple fixes in settings and app drawer (#20634)

closes -
https://discord.com/channels/1130383047699738754/1487720717192527942



https://github.com/user-attachments/assets/6db2df8b-be01-4b5f-a958-575d87b41559

~~waiting on @Bonapara 's feedback!~~

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -48,6 +48,7 @@ const StyledPageContainerBase = styled.div`
   flex: 1 1 auto;
   flex-direction: row;
   min-height: 0;
+  min-width: 0;
 `;
 const StyledPageContainer = motion.create(StyledPageContainerBase);
 
@@ -58,6 +59,7 @@ const StyledNavigationDrawerWrapper = styled.div`
 const StyledMainContainer = styled.div`
   display: flex;
   flex: 0 1 100%;
+  min-width: 0;
   overflow: hidden;
 `;
 

packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 
 import { PagePanel } from './PagePanel';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type PageBodyProps = {
   children: ReactNode;
@@ -21,6 +21,10 @@ const StyledMainContainer = styled.div`
   padding-left: 0;
   padding-right: ${themeCssVariables.spacing[3]};
   width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-left: ${themeCssVariables.spacing[3]};
+  }
 `;
 
 type LeftContainerProps = {

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -3,6 +3,7 @@ import { type ReactNode, useContext } from 'react';
 
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { useNavigationDrawerExpanded } from '@/navigation/hooks/useNavigationDrawerExpanded';
 import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
 import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
@@ -104,6 +105,7 @@ export const PageHeader = ({
   className,
 }: PageHeaderProps) => {
   const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
   const { theme } = useContext(ThemeContext);
   const isNavigationDrawerExpanded = useNavigationDrawerExpanded();
 
@@ -111,7 +113,7 @@ export const PageHeader = ({
     <AnimatePresence initial={false}>
       <StyledTopBarContainer className={className} isMobile={isMobile}>
         <StyledLeftContainer>
-          {!isMobile && !isNavigationDrawerExpanded && (
+          {!isNavigationDrawerExpanded && (!isMobile || isSettingsPage) && (
             <NavigationDrawerCollapseButton direction="right" />
           )}
           {hasClosePageButton && (

packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { useOpenSettingsMenu } from '@/navigation/hooks/useOpenSettings';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { type ReactNode, useContext } from 'react';
@@ -47,14 +47,13 @@ export const MobileBreadcrumb = ({
   links,
 }: MobileBreadcrumbProps) => {
   const { theme } = useContext(ThemeContext);
-  const { openSettingsMenu } = useOpenSettingsMenu();
+  const isSettingsPage = useIsSettingsPage();
 
-  const handleBackToSettingsClick = () => {
-    openSettingsMenu();
-  };
+  if (isSettingsPage && links.length <= 2) {
+    return null;
+  }
 
   const previousLink = links[links.length - 2];
-  const shouldRedirectToSettings = links.length === 2;
 
   const text = isNonEmptyString(previousLink.children)
     ? previousLink.children
@@ -64,14 +63,7 @@ export const MobileBreadcrumb = ({
 
   return (
     <StyledWrapper className={className}>
-      {shouldRedirectToSettings ? (
-        <>
-          <IconChevronLeft size={theme.icon.size.md} />
-          <StyledText onClick={handleBackToSettingsClick}>
-            {t`Back to Settings`}
-          </StyledText>
-        </>
-      ) : previousLink?.href ? (
+      {previousLink?.href ? (
         <>
           <IconChevronLeft size={theme.icon.size.md} />
           <StyledLinkContainer>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx

@@ -47,13 +47,12 @@ const StyledAnimatedContainer = styled.div<{
       : `${NAVIGATION_DRAWER_COLLAPSED_WIDTH}px`};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: ${({ isExpanded }) => (isExpanded ? '100%' : '0')};
+    width: ${({ isExpanded }) => (isExpanded ? '100vw' : '0')};
   }
 `;
 
 const StyledContainer = styled.div<{
   isSettings?: boolean;
-  isMobile?: boolean;
   isExpanded?: boolean;
 }>`
   box-sizing: border-box;
@@ -61,18 +60,17 @@ const StyledContainer = styled.div<{
   flex-direction: column;
   gap: ${themeCssVariables.spacing[3]};
   height: 100%;
-  padding: ${({ isSettings, isMobile }) =>
+  padding: ${({ isSettings }) =>
     isSettings
-      ? isMobile
-        ? `${themeCssVariables.spacing[3]} 0 0 ${themeCssVariables.spacing[8]}`
-        : `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} 0`
+      ? `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} 0`
       : `${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]} ${themeCssVariables.spacing[2]}`};
   width: ${({ isExpanded }) =>
     isExpanded ? `var(${NAVIGATION_DRAWER_WIDTH_VAR})` : '100%'};
   @media (max-width: ${MOBILE_VIEWPORT}px) {
+    gap: ${themeCssVariables.spacing[4]};
     width: 100%;
-    padding-left: ${themeCssVariables.spacing[5]};
-    padding-right: ${themeCssVariables.spacing[5]};
+    padding-left: ${themeCssVariables.spacing[2]};
+    padding-right: ${themeCssVariables.spacing[2]};
   }
 `;
 
@@ -125,12 +123,8 @@ export const NavigationDrawer = ({
         isExpanded={isExpanded}
         isResizing={isResizing}
       >
-        <StyledContainer
-          isSettings={isSettingsDrawer}
-          isMobile={isMobile}
-          isExpanded={isExpanded}
-        >
-          {isSettingsDrawer && title ? (
+        <StyledContainer isSettings={isSettingsDrawer} isExpanded={isExpanded}>
+          {!isMobile && isSettingsDrawer && title ? (
             <NavigationDrawerBackButton title={title} />
           ) : (
             <NavigationDrawerHeader showCollapseButton />

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent.tsx

@@ -10,14 +10,14 @@ const StyledFixedContainer = styled.div<{
   isSettings?: boolean;
   isMobile?: boolean;
 }>`
-  padding-left: ${({ isSettings }) =>
-    isSettings ? themeCssVariables.spacing[5] : '0'};
+  padding-left: ${({ isSettings, isMobile }) =>
+    isSettings || isMobile ? themeCssVariables.spacing[5] : '0'};
   padding-right: ${({ isSettings, isMobile }) =>
-    isSettings
-      ? isMobile
-        ? themeCssVariables.spacing[5]
-        : themeCssVariables.spacing[8]
-      : '0'};
+    isMobile
+      ? themeCssVariables.spacing[5]
+      : isSettings
+        ? themeCssVariables.spacing[8]
+        : '0'};
 `;
 export const NavigationDrawerFixedContent = ({
   children,

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { IconSearch } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { useOpenRecordsSearchPageInSidePanel } from '@/side-panel/hooks/useOpenRecordsSearchPageInSidePanel';
 import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
@@ -21,6 +21,11 @@ const StyledContainer = styled.div<{ isExpanded: boolean }>`
   padding-right: ${themeCssVariables.spacing[2]};
   transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
   user-select: none;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-left: ${themeCssVariables.spacing[5]};
+    padding-right: ${themeCssVariables.spacing[5]};
+  }
 `;
 
 const StyledRightActions = styled.div<{ isExpanded: boolean }>`
@@ -40,6 +45,14 @@ const StyledNavigationDrawerCollapseButtonContainer = styled.div`
     padding-right: ${themeCssVariables.spacing[1]};
     width: ${themeCssVariables.spacing[6]};
   }
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    > * {
+      height: ${themeCssVariables.spacing[8]};
+      padding-right: 0;
+      width: ${themeCssVariables.spacing[8]};
+    }
+  }
 `;
 
 const StyledWorkspaceDropdownContainer = styled.div`
@@ -68,8 +81,8 @@ export const NavigationDrawerHeader = ({
       <StyledWorkspaceDropdownContainer>
         <MultiWorkspaceDropdownButton />
       </StyledWorkspaceDropdownContainer>
-      {!isMobile && (
-        <StyledRightActions isExpanded={isNavigationDrawerExpanded}>
+      <StyledRightActions isExpanded={isNavigationDrawerExpanded}>
+        {!isMobile && (
           <LightIconButton
             Icon={IconSearch}
             accent="secondary"
@@ -77,13 +90,13 @@ export const NavigationDrawerHeader = ({
             onClick={openRecordsSearchPage}
             aria-label={t`Search`}
           />
-          {isNavigationDrawerExpanded && showCollapseButton && (
-            <StyledNavigationDrawerCollapseButtonContainer>
-              <NavigationDrawerCollapseButton direction="left" />
-            </StyledNavigationDrawerCollapseButtonContainer>
-          )}
-        </StyledRightActions>
-      )}
+        )}
+        {isNavigationDrawerExpanded && showCollapseButton && (
+          <StyledNavigationDrawerCollapseButtonContainer>
+            <NavigationDrawerCollapseButton direction="left" />
+          </StyledNavigationDrawerCollapseButtonContainer>
+        )}
+      </StyledRightActions>
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -24,6 +24,7 @@ import {
   TooltipDelay,
   TooltipPosition,
 } from 'twenty-ui/display';
+import { MenuItemIconBoxContainer } from 'twenty-ui/navigation';
 import {
   MOBILE_VIEWPORT,
   ThemeContext,
@@ -140,7 +141,7 @@ const StyledItem = styled.button<StyledItemProps>`
   }
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    font-size: ${themeCssVariables.font.size.lg};
+    height: ${themeCssVariables.spacing[8]};
   }
 `;
 
@@ -161,7 +162,7 @@ const StyledLabelParent = styled.div`
 `;
 
 const StyledItemLabel = styled.span`
-  font-weight: ${themeCssVariables.font.weight.medium};
+  font-weight: ${themeCssVariables.font.weight.regular};
 `;
 
 const StyledItemSecondaryLabel = styled.span`
@@ -193,27 +194,13 @@ const StyledSpacer = styled.span`
   flex-grow: 1;
 `;
 
-const StyledIcon = styled.div<{
-  $backgroundColor?: string;
-  $borderColor?: string;
-}>`
+const StyledIcon = styled.div`
   align-items: center;
-  background-color: ${({ $backgroundColor }) =>
-    $backgroundColor || 'transparent'};
-  border: ${({ $backgroundColor, $borderColor }) =>
-    $backgroundColor && $borderColor ? `1px solid ${$borderColor}` : 'none'};
-  border-radius: ${({ $backgroundColor }) => ($backgroundColor ? '4px' : '0')};
-  box-sizing: ${({ $backgroundColor }) =>
-    $backgroundColor ? 'border-box' : 'content-box'};
   display: flex;
   flex-grow: 0;
   flex-shrink: 0;
-  height: ${({ $backgroundColor }) =>
-    $backgroundColor ? themeCssVariables.spacing[4] : 'auto'};
   justify-content: center;
   margin-right: ${themeCssVariables.spacing[2]};
-  width: ${({ $backgroundColor }) =>
-    $backgroundColor ? themeCssVariables.spacing[4] : 'auto'};
 `;
 
 const StyledRightOptionsContainer = styled.div`
@@ -362,18 +349,20 @@ export const NavigationDrawerItem = ({
               </StyledIcon>
             ) : (
               <StyledIcon>
-                <Icon
-                  style={{
-                    minWidth: theme.icon.size.md,
-                  }}
-                  size={theme.icon.size.md}
-                  stroke={theme.icon.stroke.md}
-                  color={
-                    showBreadcrumb && !isExpanded
-                      ? theme.font.color.light
-                      : 'currentColor'
-                  }
-                />
+                <MenuItemIconBoxContainer>
+                  <Icon
+                    style={{
+                      minWidth: theme.icon.size.md,
+                    }}
+                    size={theme.icon.size.md}
+                    stroke={theme.icon.stroke.md}
+                    color={
+                      showBreadcrumb && !isExpanded
+                        ? theme.font.color.light
+                        : 'currentColor'
+                    }
+                  />
+                </MenuItemIconBoxContainer>
               </StyledIcon>
             ))}
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemBreadcrumb.tsx

@@ -1,6 +1,6 @@
 import { type NavigationDrawerSubItemState } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerSubItemState';
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type NavigationDrawerItemBreadcrumbProps = {
   state?: NavigationDrawerSubItemState;
@@ -12,6 +12,10 @@ const StyledNavigationDrawerItemBreadcrumbContainer = styled.div`
   margin-left: 7.5px;
   margin-right: ${themeCssVariables.spacing[2]};
   width: 9px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    height: ${themeCssVariables.spacing[8]};
+  }
 `;
 
 const StyledGapVerticalLine = styled.div<{ darker: boolean }>`
@@ -37,6 +41,10 @@ const StyledSecondaryFullVerticalBar = styled.div<{ darker: boolean }>`
   position: relative;
   top: -17px;
   width: 1px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    height: ${themeCssVariables.spacing[8]};
+  }
 `;
 
 const StyledRoundedProtrusion = styled.div<{ darker: boolean }>`

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx

@@ -34,7 +34,7 @@ export const NavigationDrawerScrollableContent = ({
       defaultEnableXScroll={false}
     >
       <StyledItemsContainer>
-        {isSettingsDrawer ? (
+        {isSettingsDrawer || isMobile ? (
           <StyledScrollableInnerContainer isMobile={isMobile}>
             {children}
           </StyledScrollableInnerContainer>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -17,8 +17,8 @@ const StyledTitle = styled.div`
   justify-content: space-between;
   padding-bottom: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
-  padding-right: ${themeCssVariables.spacing['0.5']};
-  padding-top: ${themeCssVariables.spacing[1]};
+  padding-right: ${themeCssVariables.spacing[1]};
+  padding-top: ${themeCssVariables.spacing[2]};
 
   &:hover {
     background-color: ${themeCssVariables.background.transparent.light};