fix: navigation drawer clip while making folder in favorites (#8619)

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavoritesFolders.tsx

@@ -43,11 +43,15 @@ export const CurrentWorkspaceMemberFavoritesFolders = () => {
   );
   const loading = useIsPrefetchLoading();
 
-  const { toggleNavigationSection, isNavigationSectionOpenState } =
+  const {
-    useNavigationSection('Favorites');
+    toggleNavigationSection,
+    isNavigationSectionOpenState,
+    openNavigationSection,
+  } = useNavigationSection('Favorites');
   const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);
 
   const toggleNewFolder = () => {
+    openNavigationSection();
     setIsFavoriteFolderCreating((current) => !current);
   };
   const shouldDisplayFavoritesWithFeatureFlagEnabled = true;

packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx

@@ -2,9 +2,11 @@ import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-
 import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
+import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import { IconPlus, MenuItem } from 'twenty-ui';
 
 const StyledFooter = styled.div`
@@ -18,6 +20,10 @@ export const FavoriteFolderPickerFooter = () => {
   const [, setIsFavoriteFolderCreating] = useRecoilState(
     isFavoriteFolderCreatingState,
   );
+  const setIsNavigationDrawerExpanded = useSetRecoilState(
+    isNavigationDrawerExpandedState,
+  );
+  const { openNavigationSection } = useNavigationSection('Favorites');
   const theme = useTheme();
   const { closeDropdown } = useDropdown(FAVORITE_FOLDER_PICKER_DROPDOWN_ID);
 
@@ -27,6 +33,8 @@ export const FavoriteFolderPickerFooter = () => {
         <MenuItem
           className="add-folder"
           onClick={() => {
+            setIsNavigationDrawerExpanded(true);
+            openNavigationSection();
             setIsFavoriteFolderCreating(true);
             closeDropdown();
           }}

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

@@ -44,7 +44,7 @@ const StyledItem = styled.div<{ isNavigationDrawerExpanded: boolean }>`
 
 const StyledItemElementsContainer = styled.span`
   align-items: center;
-
+  gap: ${({ theme }) => theme.spacing(2)};
   display: flex;
   width: 100%;
 `;
@@ -53,6 +53,7 @@ const StyledTextInput = styled.input`
   ${TEXT_INPUT_STYLE}
   margin: 0;
   width: 100%;
+  padding: 0;
 `;
 
 export const NavigationDrawerInput = ({
@@ -115,7 +116,9 @@ export const NavigationDrawerInput = ({
       <StyledItemElementsContainer>
         {Icon && (
           <Icon
-            style={{ minWidth: theme.icon.size.md }}
+            style={{
+              minWidth: theme.icon.size.md,
+            }}
             size={theme.icon.size.md}
             stroke={theme.icon.stroke.md}
             color="currentColor"