From b97ebe2f59f0fc2cfe5dee2b5b68b28393c42c98 Mon Sep 17 00:00:00 2001 From: Abdul Rahman Date: Tue, 3 Mar 2026 03:40:28 +0530 Subject: [PATCH] fix: update alignment styles in NavigationDrawerHeader - Adjusted `align-items` in `StyledContainer` to conditionally set to 'center' or 'flex-start' based on the `isExpanded` state. - Modified `align-self` in `StyledRightActions` to change between 'auto' and 'flex-end' depending on the `isExpanded` state, improving layout responsiveness. --- .../navigation-drawer/components/NavigationDrawerHeader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 f0094e60f55..be44a1695fb 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 @@ -12,7 +12,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton'; const StyledContainer = styled.div<{ isExpanded: boolean }>` - align-items: center; + align-items: ${({ isExpanded }) => (isExpanded ? 'center' : 'flex-start')}; display: flex; flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')}; gap: ${({ theme, isExpanded }) => (isExpanded ? 0 : theme.spacing(4))}; @@ -24,6 +24,7 @@ const StyledContainer = styled.div<{ isExpanded: boolean }>` const StyledRightActions = styled.div<{ isExpanded: boolean }>` align-items: center; + align-self: ${({ isExpanded }) => (isExpanded ? 'auto' : 'flex-end')}; display: flex; flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')}; gap: ${({ theme, isExpanded }) => (isExpanded ? 0 : theme.spacing(1))};