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>
2025-07-05 05:06:02 +08:00
parent 324dadca63
commit 1386f344dd
8 changed files with 17 additions and 31 deletions
--- a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
@ -1,7 +1,5 @@
-import {
-  PAGE_BAR_MIN_HEIGHT,
-  PageHeader,
-} from '@/ui/layout/page/components/PageHeader';
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
 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)}`};
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/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`
+const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
  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-left: 0;
+  padding-top: ${({ theme }) => theme.spacing(3)};
+  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" />
-          </StyledTopBarButtonContainer>
+          <NavigationDrawerCollapseButton direction="right" />
        )}
        {hasClosePageButton && (
          <LightIconButton
--- a/packages/twenty-front/src/modules/ui/layout/page/constants/PageBarMinHeight.ts
+++ b/packages/twenty-front/src/modules/ui/layout/page/constants/PageBarMinHeight.ts
@ -0,0 +1 @@
+export const PAGE_BAR_MIN_HEIGHT = 32;
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx
+++ b/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={() => {
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
+++ b/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 }) =>
-    isNavigationDrawerExpanded ? theme.spacing(5) : theme.spacing(4)};
+  height: ${({ theme }) => theme.spacing(5)};
  padding: calc(${({ theme }) => theme.spacing(1)} - 1px);
  width: ${({ isNavigationDrawerExpanded }) =>
    isNavigationDrawerExpanded ? '100%' : 'auto'};
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
+++ b/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>
  );
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx
+++ b/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(
--- 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
@ -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 }) =>