1584/fix/dropdown item width not correct (#1950)

* added full width to new button

* removed scrollbar width in dropdown item

* Fix dropdown width issue

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/companies/components/CompanyProgressPicker.tsx

@@ -3,9 +3,9 @@ import { useRecoilState } from 'recoil';
 
 import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconChevronDown } from '@/ui/icon';
 import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
@@ -84,7 +84,7 @@ export const CompanyProgressPicker = ({
       data-testid={`company-progress-dropdown-menu`}
     >
       {isProgressSelectionUnfolded ? (
-        <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer>
           {currentPipelineStages.map((pipelineStage, index) => (
             <MenuItem
               key={pipelineStage.id}
@@ -95,7 +95,7 @@ export const CompanyProgressPicker = ({
               text={pipelineStage.name}
             />
           ))}
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
       ) : (
         <>
           <DropdownMenuHeader

front/src/modules/people/components/PeopleCard.tsx

@@ -5,8 +5,8 @@ import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconDotsVertical, IconLinkOff, IconTrash } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@@ -169,9 +169,7 @@ export const PeopleCard = ({
               ref={refs.setFloating}
               style={floatingStyles}
             >
-              <StyledDropdownMenuItemsContainer
+              <DropdownMenuItemsContainer>
-                onClick={(e) => e.stopPropagation()}
-              >
                 <MenuItem
                   onClick={handleDetachPerson}
                   LeftIcon={IconLinkOff}
@@ -183,7 +181,7 @@ export const PeopleCard = ({
                   text="Delete person"
                   accent="danger"
                 />
-              </StyledDropdownMenuItemsContainer>
+              </DropdownMenuItemsContainer>
             </StyledDropdownMenu>
           )}
         </div>

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -13,9 +13,9 @@ import debounce from 'lodash.debounce';
 import { ReadonlyDeep } from 'type-fest';
 
 import { SelectOption } from '@/spreadsheet-import/types';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemSelect } from '@/ui/menu-item/components/MenuItemSelect';
@@ -127,7 +127,7 @@ export const MatchColumnSelect = ({
                 autoFocus
               />
               <StyledDropdownMenuSeparator />
-              <StyledDropdownMenuItemsContainer hasMaxHeight>
+              <DropdownMenuItemsContainer hasMaxHeight>
                 {options?.map((option) => (
                   <>
                     <MenuItemSelect
@@ -155,7 +155,7 @@ export const MatchColumnSelect = ({
                   </>
                 ))}
                 {options?.length === 0 && <MenuItem text="No result" />}
-              </StyledDropdownMenuItemsContainer>
+              </DropdownMenuItemsContainer>
             </StyledDropdownMenu>
           </StyledFloatingDropdown>,
           document.body,

front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconTrash } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@@ -114,7 +114,7 @@ export const BoardColumnEditTitleMenu = ({
   }, [onClose, onDelete, setBoardColumns, stageId]);
 
   return (
-    <StyledDropdownMenuItemsContainer>
+    <DropdownMenuItemsContainer>
       <StyledEditTitleContainer>
         <StyledEditModeInput
           value={internalValue}
@@ -142,6 +142,6 @@ export const BoardColumnEditTitleMenu = ({
         text="Delete"
         accent="danger"
       />
-    </StyledDropdownMenuItemsContainer>
+    </DropdownMenuItemsContainer>
   );
 };

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -4,8 +4,8 @@ import { Key } from 'ts-key-enum';
 
 import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress';
 import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { IconArrowLeft, IconArrowRight, IconPencil, IconPlus } from '@/ui/icon';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
@@ -135,7 +135,7 @@ export const BoardColumnMenu = ({
     <StyledMenuContainer ref={boardColumnMenuRef}>
       <StyledDropdownMenu data-select-disable>
         {currentMenu === 'actions' && (
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             <MenuItem
               onClick={() => setMenu('title')}
               LeftIcon={IconPencil}
@@ -156,7 +156,7 @@ export const BoardColumnMenu = ({
               LeftIcon={IconPlus}
               text="New opportunity"
             />
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         )}
         {currentMenu === 'title' && (
           <BoardColumnEditTitleMenu

front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx

@@ -12,9 +12,9 @@ import { BoardContext } from '@/companies/states/contexts/BoardContext';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuInputContainer } from '@/ui/dropdown/components/DropdownMenuInputContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import {
@@ -191,7 +191,7 @@ export const BoardOptionsDropdownContent = ({
             />
           </DropdownMenuInputContainer>
           <StyledDropdownMenuSeparator />
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             <MenuItemNavigate
               onClick={() => handleMenuNavigate('fields')}
               LeftIcon={IconTag}
@@ -202,7 +202,7 @@ export const BoardOptionsDropdownContent = ({
               LeftIcon={IconLayoutKanban}
               text="Stages"
             />
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'stages' && (
@@ -211,13 +211,13 @@ export const BoardOptionsDropdownContent = ({
             Stages
           </DropdownMenuHeader>
           <StyledDropdownMenuSeparator />
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             <MenuItem
               onClick={() => setCurrentMenu('stage-creation')}
               LeftIcon={IconPlus}
               text="Add stage"
             />
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'stage-creation' && (

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -4,8 +4,8 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
 import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
@@ -74,7 +74,7 @@ export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
       position={contextMenuPosition}
     >
       <StyledDropdownMenu data-select-disable width={width}>
-        <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer>
           {contextMenuEntries.map((item) => (
             <ContextMenuItem
               Icon={item.Icon}
@@ -84,7 +84,7 @@ export const ContextMenu = ({ selectedIds }: ContextMenuProps) => {
               key={item.label}
             />
           ))}
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
       </StyledDropdownMenu>
     </StyledContainerContextMenu>
   );

front/src/modules/ui/data-table/components/DataTableColumnDropdownMenu.tsx

@@ -1,5 +1,5 @@
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
@@ -53,7 +53,7 @@ export const DataTableColumnDropdownMenu = ({
     <></>
   ) : (
     <StyledDropdownMenu>
-      <StyledDropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer>
         {!isFirstColumn && (
           <MenuItem
             LeftIcon={IconArrowLeft}
@@ -73,7 +73,7 @@ export const DataTableColumnDropdownMenu = ({
           onClick={handleColumnVisibility}
           text="Hide"
         />
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
     </StyledDropdownMenu>
   );
 };

front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx

@@ -1,8 +1,8 @@
 import { ComponentProps, useCallback, useRef } from 'react';
 import styled from '@emotion/styled';
 
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 import { IconPlus } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@@ -53,7 +53,7 @@ export const DataTableHeaderPlusButton = ({
   return (
     // eslint-disable-next-line twenty/no-spread-props
     <StyledHeaderPlusButton {...props} ref={ref}>
-      <StyledDropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer>
         {hiddenTableColumns.map((column) => (
           <MenuItem
             key={column.key}
@@ -67,7 +67,7 @@ export const DataTableHeaderPlusButton = ({
             text={column.name}
           />
         ))}
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
     </StyledHeaderPlusButton>
   );
 };

front/src/modules/ui/data-table/options/components/TableOptionsDropdownContent.tsx

@@ -6,8 +6,8 @@ import { Key } from 'ts-key-enum';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
 import { DropdownMenuInputContainer } from '@/ui/dropdown/components/DropdownMenuInputContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/icon';
@@ -153,7 +153,7 @@ export const TableOptionsDropdownContent = () => {
             />
           </DropdownMenuInputContainer>
           <StyledDropdownMenuSeparator />
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             <MenuItem
               onClick={() => handleSelectMenu('fields')}
               LeftIcon={IconTag}
@@ -166,7 +166,7 @@ export const TableOptionsDropdownContent = () => {
                 text="Import"
               />
             )}
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         </>
       )}
       {currentMenu === 'fields' && (

front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+
+const StyledDropdownMenuItemsExternalContainer = styled.div<{
+  hasMaxHeight?: boolean;
+}>`
+  --padding: ${({ theme }) => theme.spacing(1)};
+
+  align-items: flex-start;
+  display: flex;
+
+  flex-direction: column;
+  gap: 2px;
+  height: 100%;
+  max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
+  overflow-y: auto;
+
+  padding: var(--padding);
+  padding-right: 0;
+
+  width: calc(100% - 1 * var(--padding));
+`;
+
+const StyledScrollWrapper = styled(ScrollWrapper)`
+  width: 100%;
+`;
+
+const StyledDropdownMenuItemsInternalContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+
+  flex-direction: column;
+  gap: 2px;
+  height: 100%;
+  width: 100%;
+`;
+
+export const DropdownMenuItemsContainer = ({
+  children,
+  hasMaxHeight,
+}: {
+  children: React.ReactNode;
+  hasMaxHeight?: boolean;
+}) => {
+  return (
+    <StyledDropdownMenuItemsExternalContainer hasMaxHeight={hasMaxHeight}>
+      <StyledScrollWrapper>
+        <StyledDropdownMenuItemsInternalContainer>
+          {children}
+        </StyledDropdownMenuItemsInternalContainer>
+      </StyledScrollWrapper>
+    </StyledDropdownMenuItemsExternalContainer>
+  );
+};

front/src/modules/ui/dropdown/components/StyledDropdownMenuItemsContainer.tsx

@@ -1,20 +0,0 @@
-import styled from '@emotion/styled';
-
-export const StyledDropdownMenuItemsContainer = styled.div<{
-  hasMaxHeight?: boolean;
-}>`
-  --padding: ${({ theme }) => theme.spacing(1)};
-
-  align-items: flex-start;
-  display: flex;
-
-  flex-direction: column;
-  gap: 2px;
-  height: 100%;
-  max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
-  overflow-y: auto;
-
-  padding: var(--padding);
-  padding-right: var(--padding);
-  width: calc(100% - 2 * var(--padding));
-`;

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -12,9 +12,9 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { DropdownMenuHeader } from '../DropdownMenuHeader';
 import { DropdownMenuInput } from '../DropdownMenuInput';
 import { DropdownMenuInputContainer } from '../DropdownMenuInputContainer';
+import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '../StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '../StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '../StyledDropdownMenuSeparator';
 import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
 
@@ -179,18 +179,18 @@ export const WithHeaders: Story = {
         <DropdownMenuHeader>Header</DropdownMenuHeader>
         <StyledDropdownMenuSeparator />
         <StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>
-        <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer>
           {mockSelectArray.slice(0, 3).map(({ name }) => (
             <MenuItem text={name} />
           ))}
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
         <StyledDropdownMenuSeparator />
         <StyledDropdownMenuSubheader>Subheader 2</StyledDropdownMenuSubheader>
-        <StyledDropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer>
           {mockSelectArray.slice(3).map(({ name }) => (
             <MenuItem text={name} />
           ))}
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
       </>
     ),
   },
@@ -203,9 +203,9 @@ export const SearchWithLoadingMenu: Story = {
       <>
         <DropdownMenuSearchInput value="query" autoFocus />
         <StyledDropdownMenuSeparator />
-        <StyledDropdownMenuItemsContainer hasMaxHeight>
+        <DropdownMenuItemsContainer hasMaxHeight>
           <DropdownMenuSkeletonItem />
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
       </>
     ),
   },
@@ -220,11 +220,11 @@ export const WithInput: Story = {
           <DropdownMenuInput defaultValue="Lorem ipsum" autoFocus />
         </DropdownMenuInputContainer>
         <StyledDropdownMenuSeparator />
-        <StyledDropdownMenuItemsContainer hasMaxHeight>
+        <DropdownMenuItemsContainer hasMaxHeight>
           {mockSelectArray.map(({ name }) => (
             <MenuItem text={name} />
           ))}
-        </StyledDropdownMenuItemsContainer>
+        </DropdownMenuItemsContainer>
       </>
     ),
   },
@@ -234,9 +234,9 @@ export const SelectableMenuItemWithAvatar: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
     children: (
-      <StyledDropdownMenuItemsContainer hasMaxHeight>
+      <DropdownMenuItemsContainer hasMaxHeight>
         <FakeSelectableMenuItemList hasAvatar />
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
     ),
   },
 };
@@ -245,9 +245,9 @@ export const CheckableMenuItemWithAvatar: Story = {
   decorators: [WithContentBelowDecorator],
   args: {
     children: (
-      <StyledDropdownMenuItemsContainer hasMaxHeight>
+      <DropdownMenuItemsContainer hasMaxHeight>
         <FakeCheckableMenuItemList hasAvatar />
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
     ),
   },
 };

front/src/modules/ui/input/components/IconPicker.tsx

@@ -2,9 +2,9 @@ import { useEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { LightIconButton } from '@/ui/button/components/LightIconButton';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 
@@ -19,7 +19,7 @@ const StyledIconPickerDropdownMenu = styled(StyledDropdownMenu)`
   width: 176px;
 `;
 
-const StyledMenuIconItemsContainer = styled(StyledDropdownMenuItemsContainer)`
+const StyledMenuIconItemsContainer = styled(DropdownMenuItemsContainer)`
   flex-direction: row;
   flex-wrap: wrap;
   height: auto;

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -1,9 +1,9 @@
 import { useRef } from 'react';
 import debounce from 'lodash.debounce';
 
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/dropdown/components/DropdownMenuSearchInput';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/menu-item/components/MenuItemMultiSelectAvatar';
@@ -79,7 +79,7 @@ export const MultipleEntitySelect = <
         autoFocus
       />
       <StyledDropdownMenuSeparator />
-      <StyledDropdownMenuItemsContainer hasMaxHeight>
+      <DropdownMenuItemsContainer hasMaxHeight>
         {entitiesInDropdown?.map((entity) => (
           <MenuItemMultiSelectAvatar
             key={entity.id}
@@ -100,7 +100,7 @@ export const MultipleEntitySelect = <
           />
         ))}
         {entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
     </StyledDropdownMenu>
   );
 };

front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Key } from 'ts-key-enum';
 
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { IconPlus } from '@/ui/icon';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
@@ -102,8 +102,8 @@ export const SingleEntitySelectBase = <
   );
 
   return (
-    <>
+    <div ref={containerRef}>
-      <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+      <DropdownMenuItemsContainer hasMaxHeight>
         {loading ? (
           <DropdownMenuSkeletonItem />
         ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown ? (
@@ -151,10 +151,10 @@ export const SingleEntitySelectBase = <
             ))}
           </>
         )}
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
       {showCreateButton && (
         <>
-          <StyledDropdownMenuItemsContainer hasMaxHeight>
+          <DropdownMenuItemsContainer hasMaxHeight>
             <StyledDropdownMenuSeparator />
             <CreateNewButton
               onClick={onCreate}
@@ -162,9 +162,9 @@ export const SingleEntitySelectBase = <
               text="Add New"
               hovered={preselectedOptionId === CreateButtonId}
             />
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         </>
       )}
-    </>
+    </div>
   );
 };

front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -4,8 +4,8 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { IconButton } from '@/ui/button/components/IconButton';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconCheckbox, IconNotes, IconPlus } from '@/ui/icon/index';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
@@ -47,9 +47,7 @@ export const ShowPageAddButton = ({
         }
         dropdownComponents={
           <StyledDropdownMenu>
-            <StyledDropdownMenuItemsContainer
+            <DropdownMenuItemsContainer>
-              onClick={(e) => e.stopPropagation()}
-            >
               <MenuItem
                 onClick={() => handleSelect(ActivityType.Note)}
                 accent="default"
@@ -62,7 +60,7 @@ export const ShowPageAddButton = ({
                 LeftIcon={IconCheckbox}
                 text="Task"
               />
-            </StyledDropdownMenuItemsContainer>
+            </DropdownMenuItemsContainer>
           </StyledDropdownMenu>
         }
         dropdownHotkeyScope={{

front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -28,6 +28,7 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
   height: calc(32px - 2 * var(--vertical-padding));
 
   justify-content: space-between;
+  padding: var(--vertical-padding) var(--horizontal-padding);
 
   ${hoverBackground};
 
@@ -55,9 +56,7 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
     }
   }}
 
-  padding: var(--vertical-padding) var(--horizontal-padding);
   position: relative;
-
   user-select: none;
 
   width: calc(100% - 2 * var(--horizontal-padding));

front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx

@@ -1,4 +1,4 @@
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -38,7 +38,7 @@ export const FilterDropdownFilterSelect = () => {
   const setHotkeyScope = useSetHotkeyScope();
 
   return (
-    <StyledDropdownMenuItemsContainer>
+    <DropdownMenuItemsContainer>
       {availableFilters.map((availableFilter, index) => (
         <MenuItem
           key={`select-filter-${index}`}
@@ -60,6 +60,6 @@ export const FilterDropdownFilterSelect = () => {
           text={availableFilter.label}
         />
       ))}
-    </StyledDropdownMenuItemsContainer>
+    </DropdownMenuItemsContainer>
   );
 };

front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx

@@ -1,4 +1,4 @@
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
@@ -61,7 +61,7 @@ export const FilterDropdownOperandSelect = () => {
   }
 
   return (
-    <StyledDropdownMenuItemsContainer>
+    <DropdownMenuItemsContainer>
       {operandsForFilterType.map((filterOperand, index) => (
         <MenuItem
           key={`select-filter-operand-${index}`}
@@ -71,6 +71,6 @@ export const FilterDropdownOperandSelect = () => {
           text={getOperandLabel(filterOperand)}
         />
       ))}
-    </StyledDropdownMenuItemsContainer>
+    </DropdownMenuItemsContainer>
   );
 };

front/src/modules/ui/view-bar/components/SortDropdownButton.tsx

@@ -3,8 +3,8 @@ import { produce } from 'immer';
 
 import { LightButton } from '@/ui/button/components/LightButton';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import { IconChevronDown } from '@/ui/icon';
@@ -104,7 +104,7 @@ export const SortDropdownButton = ({
       dropdownComponents={
         <StyledDropdownMenu>
           {isSortDirectionMenuUnfolded ? (
-            <StyledDropdownMenuItemsContainer>
+            <DropdownMenuItemsContainer>
               {SORT_DIRECTIONS.map((sortOrder, index) => (
                 <MenuItem
                   key={index}
@@ -115,7 +115,7 @@ export const SortDropdownButton = ({
                   text={sortOrder === 'asc' ? 'Ascending' : 'Descending'}
                 />
               ))}
-            </StyledDropdownMenuItemsContainer>
+            </DropdownMenuItemsContainer>
           ) : (
             <>
               <DropdownMenuHeader
@@ -125,7 +125,7 @@ export const SortDropdownButton = ({
                 {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
               </DropdownMenuHeader>
               <StyledDropdownMenuSeparator />
-              <StyledDropdownMenuItemsContainer>
+              <DropdownMenuItemsContainer>
                 {availableSorts.map((availableSort, index) => (
                   <MenuItem
                     testId={`select-sort-${index}`}
@@ -135,7 +135,7 @@ export const SortDropdownButton = ({
                     text={availableSort.label}
                   />
                 ))}
-              </StyledDropdownMenuItemsContainer>
+              </DropdownMenuItemsContainer>
             </>
           )}
         </StyledDropdownMenu>

front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx

@@ -6,7 +6,7 @@ import { Key } from 'ts-key-enum';
 import { Button } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { DropdownMenuContainer } from '@/ui/dropdown/components/DropdownMenuContainer';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { IconChevronDown, IconPlus } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -127,13 +127,13 @@ export const UpdateViewButtonGroup = ({
 
       {isDropdownOpen && (
         <DropdownMenuContainer onClose={handleDropdownClose}>
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             <MenuItem
               onClick={handleCreateViewButtonClick}
               LeftIcon={IconPlus}
               text="Create view"
             />
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
         </DropdownMenuContainer>
       )}
     </StyledContainer>

front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -8,7 +8,7 @@ import {
 
 import { DraggableItem } from '@/ui/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/draggable-list/components/DraggableList';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import { IconMinus, IconPlus } from '@/ui/icon';
 import { IconInfoCircle } from '@/ui/input/constants/icons';
@@ -82,7 +82,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
   return (
     <div ref={ref}>
       <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
-      <StyledDropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer>
         {isDraggable ? (
           <DraggableList
             onDragEnd={handleOnDrag}
@@ -124,7 +124,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
             />
           ))
         )}
-      </StyledDropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
       {isDefined(openToolTipIndex) &&
         createPortal(
           <AppTooltip

front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx

@@ -8,9 +8,9 @@ import {
   useSetRecoilState,
 } from 'recoil';
 
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownButtonContainer } from '@/ui/dropdown/components/StyledDropdownButtonContainer';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
-import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
 import { useDropdown } from '@/ui/dropdown/hooks/useDropdown';
 import {
@@ -43,9 +43,7 @@ import { useRemoveView } from '../hooks/useRemoveView';
 
 import { ViewBarDropdownButton } from './ViewBarDropdownButton';
 
-const StyledBoldDropdownMenuItemsContainer = styled(
+const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
-  StyledDropdownMenuItemsContainer,
-)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
@@ -177,7 +175,7 @@ export const ViewsDropdownButton = ({
       }
       dropdownComponents={
         <StyledDropdownMenu width={200}>
-          <StyledDropdownMenuItemsContainer>
+          <DropdownMenuItemsContainer>
             {views.map((view) => (
               <MenuItem
                 key={view.id}
@@ -200,7 +198,7 @@ export const ViewsDropdownButton = ({
                 text={view.name}
               />
             ))}
-          </StyledDropdownMenuItemsContainer>
+          </DropdownMenuItemsContainer>
           <StyledDropdownMenuSeparator />
           <StyledBoldDropdownMenuItemsContainer>
             <MenuItem