From 86fa6ec85f74b0b7fe062e3d88f30cf5126b816a Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 27 Jun 2024 15:43:00 +0200
Subject: [PATCH] fix navigation panel workspace picker padding (#6062)

## Before
<img width="223" alt="Screenshot 2024-06-27 at 15 23 26"
src="https://github.com/twentyhq/twenty/assets/1834158/18cb5e15-352f-4e65-9cff-6e396abe4318">

## After



<img width="229" alt="Screenshot 2024-06-27 at 15 23 07"
src="https://github.com/twentyhq/twenty/assets/1834158/53502c23-d9b4-4967-9e56-26e62e5e50ea">

<img width="225" alt="Screenshot 2024-06-27 at 15 25 23"
src="https://github.com/twentyhq/twenty/assets/1834158/fbb751ba-2bde-44f0-9c70-a9091e9b9012">
---
 .../components/NavigationDrawerHeader.tsx             | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

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 72b384fb0c91..9ba91a1c5935 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
@@ -9,9 +9,13 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isMultiWorkspace: boolean }>`
   align-items: center;
   display: flex;
+  gap: ${({ theme, isMultiWorkspace }) =>
+    !isMultiWorkspace ? theme.spacing(2) : null};
+  padding: ${({ theme, isMultiWorkspace }) =>
+    !isMultiWorkspace ? theme.spacing(1) : null};
   height: ${({ theme }) => theme.spacing(7)};
   user-select: none;
 `;
@@ -53,10 +57,11 @@ export const NavigationDrawerHeader = ({
 }: NavigationDrawerHeaderProps) => {
   const isMobile = useIsMobile();
   const workspaces = useRecoilValue(workspacesState);
+  const isMultiWorkspace = workspaces !== null && workspaces.length > 1;
 
   return (
-    <StyledContainer>
-      {workspaces !== null && workspaces.length > 1 ? (
+    <StyledContainer isMultiWorkspace={isMultiWorkspace}>
+      {isMultiWorkspace ? (
         <MultiWorkspaceDropdownButton workspaces={workspaces} />
       ) : (
         <>