minor fix - collapse button hover and dropdown button width (#7748)

follow up - #7414

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

@@ -1,21 +1,21 @@
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
-import { IconChevronDown } from 'twenty-ui';
-
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { Workspaces } from '@/auth/states/workspaces';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
+import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId';
 import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
 import { NavigationDrawerHotKeyScope } from '@/ui/navigation/navigation-drawer/types/NavigationDrawerHotKeyScope';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { IconChevronDown } from 'twenty-ui';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
-import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 
 const StyledLogo = styled.div<{ logo: string }>`
   background: url(${({ logo }) => logo});
@@ -26,7 +26,7 @@ const StyledLogo = styled.div<{ logo: string }>`
   width: 16px;
 `;
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isNavigationDrawerExpanded: boolean }>`
   align-items: center;
   cursor: pointer;
   color: ${({ theme }) => theme.font.color.primary};
@@ -34,10 +34,13 @@ const StyledContainer = styled.div`
   border: 1px solid transparent;
   display: flex;
   justify-content: space-between;
-  height: ${({ theme }) => theme.spacing(5)};
+  height: ${({ theme, isNavigationDrawerExpanded }) =>
+    isNavigationDrawerExpanded ? theme.spacing(5) : theme.spacing(4)};
   padding: calc(${({ theme }) => theme.spacing(1)} - 1px);
-  width: 100%;
-
+  width: ${({ isNavigationDrawerExpanded }) =>
+    isNavigationDrawerExpanded ? '100%' : 'auto'};
+  gap: ${({ theme, isNavigationDrawerExpanded }) =>
+    isNavigationDrawerExpanded ? theme.spacing(1) : '0'};
   &:hover {
     background-color: ${({ theme }) => theme.background.transparent.lighter};
     border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -47,12 +50,13 @@ const StyledContainer = styled.div`
 const StyledLabel = styled.div`
   align-items: center;
   display: flex;
-  margin: 0 ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
+  align-items: center;
   color: ${({ disabled, theme }) =>
     disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
+  display: flex;
 `;
 
 type MultiWorkspaceDropdownButtonProps = {
@@ -77,6 +81,9 @@ export const MultiWorkspaceDropdownButton = ({
     closeDropdown();
     await switchWorkspace(workspaceId);
   };
+  const [isNavigationDrawerExpanded] = useRecoilState(
+    isNavigationDrawerExpandedState,
+  );
 
   return (
     <Dropdown
@@ -85,7 +92,10 @@ export const MultiWorkspaceDropdownButton = ({
         scope: NavigationDrawerHotKeyScope.MultiWorkspaceDropdownButton,
       }}
       clickableComponent={
-        <StyledContainer data-testid="workspace-dropdown">
+        <StyledContainer
+          data-testid="workspace-dropdown"
+          isNavigationDrawerExpanded={isNavigationDrawerExpanded}
+        >
           <StyledLogo
             logo={
               getImageAbsoluteURI(

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

@@ -13,14 +13,10 @@ const StyledCollapseButton = styled.div`
   color: ${({ theme }) => theme.font.color.light};
   cursor: pointer;
   display: flex;
-  height: ${({ theme }) => theme.spacing(5)};
+  height: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
   user-select: none;
-  width: ${({ theme }) => theme.spacing(6)};
-
-  &:hover {
-    background: ${({ theme }) => theme.background.quaternary};
-  }
+  width: ${({ theme }) => theme.spacing(4)};
 `;
 
 type NavigationDrawerCollapseButtonProps = {