Fixed expandable list and navigation menu (#8336)

For release 0.32

- Fixed expandable list dropdown UI bugs
- Added ScrollWrapper on navigation menus

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

@@ -12,9 +12,10 @@ import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { useFavorites } from '../hooks/useFavorites';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { NavigationDrawerItemsCollapsedContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsedContainer';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { useFavorites } from '../hooks/useFavorites';
 
 const StyledContainer = styled(NavigationDrawerSection)`
   width: 100%;
@@ -115,9 +116,11 @@ export const CurrentWorkspaceMemberFavorites = () => {
       </NavigationDrawerAnimatedCollapseWrapper>
 
       {isNavigationSectionOpen && (
-        <NavigationDrawerItemsCollapsedContainer isGroup={isGroup}>
+        <ScrollWrapper contextProviderName="navigationDrawer">
-          {draggableListContent}
+          <NavigationDrawerItemsCollapsedContainer isGroup={isGroup}>
-        </NavigationDrawerItemsCollapsedContainer>
+            {draggableListContent}
+          </NavigationDrawerItemsCollapsedContainer>
+        </ScrollWrapper>
       )}
     </StyledContainer>
   );

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -14,6 +14,11 @@ import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/n
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
+
+const StyledMainSection = styled(NavigationDrawerSection)`
+  min-height: fit-content;
+`;
 
 export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
@@ -34,7 +39,7 @@ export const MainNavigationDrawerItems = () => {
   return (
     <>
       {!isMobile && (
-        <NavigationDrawerSection>
+        <StyledMainSection>
           <NavigationDrawerItem
             label="Search"
             Icon={IconSearch}
@@ -51,7 +56,7 @@ export const MainNavigationDrawerItems = () => {
             }}
             Icon={IconSettings}
           />
-        </NavigationDrawerSection>
+        </StyledMainSection>
       )}
 
       {isWorkspaceFavoriteEnabled && <NavigationDrawerOpenedSection />}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx

@@ -23,7 +23,7 @@ const StyledDropdownMenu = styled.div<{
 
   display: flex;
 
-  height: 100%;
+  height: auto;
 
   flex-direction: column;
   z-index: 30;

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx

@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { offset, useFloating } from '@floating-ui/react';
+import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
+import { ReactNode } from 'react';
 
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -40,9 +40,8 @@ export const ExpandedListDropdown = ({
   withBorder,
 }: ExpandedListDropdownProps) => {
   const { refs, floatingStyles } = useFloating({
-    // @ts-expect-error placement accepts 'start' as value even if the typing does not permit it
+    placement: 'bottom-start',
-    placement: 'start',
+    middleware: [offset({ mainAxis: -9, crossAxis: -7 }), shift()],
-    middleware: [offset({ mainAxis: -9, crossAxis: -7 })],
     elements: { reference: anchorElement },
   });
 
@@ -52,18 +51,20 @@ export const ExpandedListDropdown = ({
   });
 
   return (
-    <DropdownMenu
+    <FloatingPortal>
-      ref={refs.setFloating}
+      <DropdownMenu
-      style={floatingStyles}
+        ref={refs.setFloating}
-      width={
+        style={floatingStyles}
-        anchorElement
+        width={
-          ? Math.max(220, anchorElement.getBoundingClientRect().width)
+          anchorElement
-          : undefined
+            ? Math.max(220, anchorElement.getBoundingClientRect().width)
-      }
+            : undefined
-    >
+        }
-      <StyledExpandedListContainer withBorder={withBorder}>
+      >
-        {children}
+        <StyledExpandedListContainer withBorder={withBorder}>
-      </StyledExpandedListContainer>
+          {children}
-    </DropdownMenu>
+        </StyledExpandedListContainer>
+      </DropdownMenu>
+    </FloatingPortal>
   );
 };

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -2,7 +2,12 @@ import styled from '@emotion/styled';
 import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import { ComponentDecorator, MAIN_COLOR_NAMES, Tag } from 'twenty-ui';
+import {
+  ComponentDecorator,
+  isDefined,
+  MAIN_COLOR_NAMES,
+  Tag,
+} from 'twenty-ui';
 
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 
@@ -48,13 +53,20 @@ export const WithChipCount: Story = {
 
 export const WithExpandedList: Story = {
   ...WithChipCount,
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const root = document.getElementsByTagName('body')[0];
-    const chipCount = await canvas.findByText('+3');
+
+    if (!isDefined(root)) {
+      throw new Error('Root element not found');
+    }
+
+    const rootCanvas = within(root);
+
+    const chipCount = await rootCanvas.findByText('+3');
 
     await userEvent.click(chipCount);
 
-    expect(await canvas.findByText('Option 7')).toBeDefined();
+    expect(await rootCanvas.findByText('Option 7')).toBeDefined();
   },
 };