Fix navigation drag drop indicator position (#18515)

Closes [#2295](https://github.com/twentyhq/core-team-issues/issues/2295)

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItems.tsx

@@ -26,6 +26,8 @@ import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/us
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { coreViewsState } from '@/views/states/coreViewState';
 import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView';
+import { styled } from '@linaria/react';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const LazyWorkspaceSectionListDndKit = lazy(() =>
   import(
@@ -33,6 +35,10 @@ const LazyWorkspaceSectionListDndKit = lazy(() =>
   ).then((m) => ({ default: m.WorkspaceSectionListDndKit })),
 );
 
+const StyledWorkspaceSectionContentGapOffset = styled.div`
+  margin-top: calc(-1 * ${themeCssVariables.betweenSiblingsGap});
+`;
+
 type NavigationDrawerSectionForWorkspaceItemsProps = {
   sectionTitle: string;
   items: FlatWorkspaceItem[];
@@ -150,44 +156,48 @@ export const NavigationDrawerSectionForWorkspaceItems = ({
           isOpen={isNavigationSectionOpen}
         />
       </NavigationDrawerAnimatedCollapseWrapper>
-      <AnimatedExpandableContainer
-        isExpanded={
-          isNavigationSectionOpen || isAddToNavigationDropTargetVisible
-        }
-        dimension="height"
-        mode="fit-content"
-        containAnimation
-        initial={false}
-      >
-        {isNavigationMenuInEditMode ? (
-          <Suspense
-            fallback={
-              <WorkspaceSectionListEditModeFallback
+      <StyledWorkspaceSectionContentGapOffset>
+        <AnimatedExpandableContainer
+          isExpanded={
+            isNavigationSectionOpen || isAddToNavigationDropTargetVisible
+          }
+          dimension="height"
+          mode="fit-content"
+          containAnimation
+          initial={false}
+        >
+          {isNavigationMenuInEditMode ? (
+            <Suspense
+              fallback={
+                <WorkspaceSectionListEditModeFallback
+                  filteredItems={filteredItems}
+                  folderChildrenById={folderChildrenById}
+                  onActiveObjectMetadataItemClick={
+                    onActiveObjectMetadataItemClick
+                  }
+                />
+              }
+            >
+              <LazyWorkspaceSectionListDndKit
                 filteredItems={filteredItems}
+                getEditModeProps={getEditModeProps}
                 folderChildrenById={folderChildrenById}
+                selectedNavigationMenuItemId={selectedNavigationMenuItemId}
+                onNavigationMenuItemClick={onNavigationMenuItemClick}
                 onActiveObjectMetadataItemClick={
                   onActiveObjectMetadataItemClick
                 }
               />
-            }
-          >
-            <LazyWorkspaceSectionListDndKit
+            </Suspense>
+          ) : (
+            <NavigationDrawerSectionForWorkspaceItemsListReadOnly
               filteredItems={filteredItems}
-              getEditModeProps={getEditModeProps}
               folderChildrenById={folderChildrenById}
-              selectedNavigationMenuItemId={selectedNavigationMenuItemId}
-              onNavigationMenuItemClick={onNavigationMenuItemClick}
               onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
             />
-          </Suspense>
-        ) : (
-          <NavigationDrawerSectionForWorkspaceItemsListReadOnly
-            filteredItems={filteredItems}
-            folderChildrenById={folderChildrenById}
-            onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
-          />
-        )}
-      </AnimatedExpandableContainer>
+          )}
+        </AnimatedExpandableContainer>
+      </StyledWorkspaceSectionContentGapOffset>
     </NavigationDrawerSection>
   );
 };

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListDndKit.tsx

@@ -3,7 +3,6 @@ import { WorkspaceDndKitSortableItem } from '@/navigation-menu-item/components/W
 import { NavigationMenuItemDroppableIds } from '@/navigation-menu-item/constants/NavigationMenuItemDroppableIds';
 import { NavigationMenuItemType } from '@/navigation-menu-item/constants/NavigationMenuItemType';
 import { NavigationDropTargetContext } from '@/navigation-menu-item/contexts/NavigationDropTargetContext';
-import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection';
 import { isNavigationMenuInEditModeState } from '@/navigation-menu-item/states/isNavigationMenuInEditModeState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -11,6 +10,7 @@ import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
+import { NavigationMenuItemDragContext } from '@/navigation-menu-item/contexts/NavigationMenuItemDragContext';
 import { NavigationDrawerSectionForWorkspaceItemContent } from '@/object-metadata/components/NavigationDrawerSectionForWorkspaceItemContent';
 import { WorkspaceOrphanDropTarget } from '@/object-metadata/components/WorkspaceOrphanDropTarget';
 import { WorkspaceSectionAddMenuItemButton } from '@/object-metadata/components/WorkspaceSectionAddMenuItemButton';
@@ -20,6 +20,7 @@ const StyledList = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.betweenSiblingsGap};
+  padding-top: ${themeCssVariables.betweenSiblingsGap};
 `;
 
 const StyledListItemRow = styled.div`

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForWorkspaceItemsListReadOnly.tsx

@@ -10,6 +10,7 @@ const StyledList = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.betweenSiblingsGap};
+  padding-top: ${themeCssVariables.betweenSiblingsGap};
 `;
 
 type NavigationDrawerSectionForWorkspaceItemsListReadOnlyProps = Pick<