fix: align workspace switcher button in collapsed navigation drawer (#12893) (#12902)

## Summary
- Fixes #12893 - Workspace switcher button now aligns properly with
record index headers when navigation drawer is collapsed
- Maintains consistent button height in both expanded and collapsed
states
- Simple CSS fix that improves visual consistency

## Fix Details
The issue was caused by the workspace switcher button changing height
from 20px (expanded) to 16px (collapsed). This created misalignment with
the page headers.

Changed in `MultiWorkspacesDropdownStyles.tsx`:
```tsx
// Before - height changed based on drawer state
height: ${({ theme, isNavigationDrawerExpanded }) =>
  isNavigationDrawerExpanded ? theme.spacing(5) : theme.spacing(4)};

// After - consistent height
height: ${({ theme }) => theme.spacing(5)};
```

## Visual Alignment
- Workspace switcher button: 20px height (theme.spacing(5))
- Maintains alignment with record index headers in collapsed state
- Consistent with Figma design requirements

## Test Plan
- [x] Collapsed navigation drawer - workspace switcher aligns with
headers
- [x] Expanded navigation drawer - no visual regression
- [x] Button functionality remains unchanged

---

🤖 This fix was implemented using [Claude Code](https://claude.ai/code)
by Jez (Jeremy Dawes) and Claude working together\!

Thanks to the Twenty team for the great project\! 🚀

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx

@@ -1,7 +1,5 @@
-import {
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
-  PAGE_BAR_MIN_HEIGHT,
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
-  PageHeader,
-} from '@/ui/layout/page/components/PageHeader';
 import {
   Breadcrumb,
   BreadcrumbProps,
@@ -24,7 +22,7 @@ const StyledFullScreen = styled.div`
 
 const StyledMainContainer = styled.div`
   height: calc(
-    100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 3)}
+    100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 5)}
   );
   padding: ${({ theme }) =>
     `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};

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

@@ -6,6 +6,7 @@ import { useRecoilValue } from 'recoil';
 import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
 
 import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
@@ -16,9 +17,7 @@ import {
 import { LightIconButton } from 'twenty-ui/input';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
-export const PAGE_BAR_MIN_HEIGHT = 40;
+const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
-
-const StyledTopBarContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.noisy};
   color: ${({ theme }) => theme.font.color.primary};
@@ -27,15 +26,11 @@ const StyledTopBarContainer = styled.div`
   font-size: ${({ theme }) => theme.font.size.lg};
   justify-content: space-between;
   min-height: ${PAGE_BAR_MIN_HEIGHT}px;
-  padding: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(3)};
-  padding-left: 0;
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+  padding-left: ${({ isMobile, theme }) => (isMobile ? theme.spacing(3) : 0)};
   padding-right: ${({ theme }) => theme.spacing(3)};
   gap: ${({ theme }) => theme.spacing(2)};
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    box-sizing: border-box;
-    padding: ${({ theme }) => theme.spacing(3)};
-  }
 `;
 
 const StyledLeftContainer = styled.div`
@@ -43,7 +38,6 @@ const StyledLeftContainer = styled.div`
   display: flex;
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
   overflow-x: hidden;
   width: 100%;
   @media (max-width: ${MOBILE_VIEWPORT}px) {
@@ -76,11 +70,6 @@ const StyledPageActionContainer = styled.div`
   flex: 1 0 auto;
 `;
 
-const StyledTopBarButtonContainer = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(1)};
-  margin-right: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledIconContainer = styled.div`
   align-items: center;
   display: flex;
@@ -111,12 +100,10 @@ export const PageHeader = ({
   );
 
   return (
-    <StyledTopBarContainer className={className}>
+    <StyledTopBarContainer className={className} isMobile={isMobile}>
       <StyledLeftContainer>
         {!isMobile && !isNavigationDrawerExpanded && (
-          <StyledTopBarButtonContainer>
+          <NavigationDrawerCollapseButton direction="right" />
-            <NavigationDrawerCollapseButton direction="right" />
-          </StyledTopBarButtonContainer>
         )}
         {hasClosePageButton && (
           <LightIconButton

packages/twenty-front/src/modules/ui/layout/page/constants/PageBarMinHeight.ts

@@ -0,0 +1 @@
+export const PAGE_BAR_MIN_HEIGHT = 32;

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

@@ -27,7 +27,7 @@ export const MultiWorkspaceDropdownButton = () => {
   return (
     <Dropdown
       dropdownId={MULTI_WORKSPACE_DROPDOWN_ID}
-      dropdownOffset={{ y: -35, x: -5 }}
+      dropdownOffset={{ y: -30, x: -5 }}
       clickableComponent={<MultiWorkspaceDropdownClickableComponent />}
       dropdownComponents={<DropdownComponents />}
       onClose={() => {

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx

@@ -11,8 +11,7 @@ export const StyledContainer = styled.div<{
   border: 1px solid transparent;
   display: flex;
   justify-content: space-between;
-  height: ${({ theme, isNavigationDrawerExpanded }) =>
+  height: ${({ theme }) => theme.spacing(5)};
-    isNavigationDrawerExpanded ? theme.spacing(5) : theme.spacing(4)};
   padding: calc(${({ theme }) => theme.spacing(1)} - 1px);
   width: ${({ isNavigationDrawerExpanded }) =>
     isNavigationDrawerExpanded ? '100%' : 'auto'};

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

@@ -46,7 +46,7 @@ export const NavigationDrawerCollapseButton = ({
             : IconLayoutSidebarRightCollapse
         }
         accent="tertiary"
-        size="medium"
+        size="small"
       />
     </StyledCollapseButton>
   );

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

@@ -4,15 +4,16 @@ import { useRecoilValue } from 'recoil';
 import { MultiWorkspaceDropdownButton } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
-  height: ${({ theme }) => theme.spacing(8)};
   user-select: none;
   padding-right: ${({ theme }) => theme.spacing(2)};
+  min-height: ${PAGE_BAR_MIN_HEIGHT}px;
 `;
 
 const StyledNavigationDrawerCollapseButton = styled(

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

@@ -90,7 +90,7 @@ const StyledItem = styled('button', {
 
   width: ${(props) =>
     !props.isNavigationDrawerExpanded
-      ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(5.5)})`
+      ? `calc(${NAV_DRAWER_WIDTHS.menu.desktop.collapsed}px - ${props.theme.spacing(6)})`
       : `calc(100% - ${props.theme.spacing(1.5)})`};
 
   ${({ isDragging }) =>