From 1386f344ddb446c152fba0a3ee810853e430e094 Mon Sep 17 00:00:00 2001 From: Jeremy Dawes Date: Sat, 5 Jul 2025 05:06:02 +0800 Subject: [PATCH] fix: align workspace switcher button in collapsed navigation drawer (#12893) (#12902) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 Co-authored-by: ehconitin Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com> Co-authored-by: Charles Bochet --- .../components/FullScreenContainer.tsx | 8 +++--- .../ui/layout/page/components/PageHeader.tsx | 27 +++++-------------- .../layout/page/constants/PageBarMinHeight.ts | 1 + .../MultiWorkspaceDropdownButton.tsx | 2 +- .../MultiWorkspacesDropdownStyles.tsx | 3 +-- .../NavigationDrawerCollapseButton.tsx | 2 +- .../components/NavigationDrawerHeader.tsx | 3 ++- .../components/NavigationDrawerItem.tsx | 2 +- 8 files changed, 17 insertions(+), 31 deletions(-) create mode 100644 packages/twenty-front/src/modules/ui/layout/page/constants/PageBarMinHeight.ts diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx index 2974c70b1..4164060bd 100644 --- 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)}`}; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx index b1a0d2f05..3347e8ccc 100644 --- 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 ( - + {!isMobile && !isNavigationDrawerExpanded && ( - - - + )} {hasClosePageButton && ( { return ( } dropdownComponents={} onClose={() => { diff --git 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 index 4823bc9cf..c882126f5 100644 --- 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'}; diff --git 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 index 454a80c8b..d7576bb15 100644 --- 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" /> ); diff --git 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 index 21ceab9de..fd514e459 100644 --- 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( 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 78169d6bb..4896c8b57 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 @@ -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 }) =>