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>
2023-10-10 02:07:26 +05:30
parent e1c0cb7821
commit 29c013f826
24 changed files with 137 additions and 109 deletions
--- a/front/src/modules/companies/components/CompanyProgressPicker.tsx
+++ b/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
--- a/front/src/modules/people/components/PeopleCard.tsx
+++ b/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
-                onClick={(e) => e.stopPropagation()}
-              >
+              <DropdownMenuItemsContainer>
                <MenuItem
                  onClick={handleDetachPerson}
                  LeftIcon={IconLinkOff}
@ -183,7 +181,7 @@ export const PeopleCard = ({
                  text="Delete person"
                  accent="danger"
                />
-              </StyledDropdownMenuItemsContainer>
+              </DropdownMenuItemsContainer>
            </StyledDropdownMenu>
          )}
        </div>
--- a/front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
+++ b/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,
--- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/board/components/BoardColumnMenu.tsx
+++ b/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
--- a/front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx
+++ b/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' && (
--- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx
+++ b/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>
  );
--- a/front/src/modules/ui/data-table/components/DataTableColumnDropdownMenu.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/data-table/options/components/TableOptionsDropdownContent.tsx
+++ b/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' && (
--- a/front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
+++ b/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>
+  );
+};
--- a/front/src/modules/ui/dropdown/components/StyledDropdownMenuItemsContainer.tsx
+++ b/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));
-`;
--- a/front/src/modules/ui/dropdown/components/stories/DropdownMenu.stories.tsx
+++ b/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>
    ),
  },
 };
--- a/front/src/modules/ui/input/components/IconPicker.tsx
+++ b/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;
--- a/front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx
+++ b/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 (
-    <>
-      <StyledDropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+    <div ref={containerRef}>
+      <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>
  );
 };
--- a/front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/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
-              onClick={(e) => e.stopPropagation()}
-            >
+            <DropdownMenuItemsContainer>
              <MenuItem
                onClick={() => handleSelect(ActivityType.Note)}
                accent="default"
@ -62,7 +60,7 @@ export const ShowPageAddButton = ({
                LeftIcon={IconCheckbox}
                text="Task"
              />
-            </StyledDropdownMenuItemsContainer>
+            </DropdownMenuItemsContainer>
          </StyledDropdownMenu>
        }
        dropdownHotkeyScope={{
--- a/front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/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));
--- a/front/src/modules/ui/view-bar/components/FilterDropdownFilterSelect.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/view-bar/components/FilterDropdownOperandSelect.tsx
+++ b/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>
  );
 };
--- a/front/src/modules/ui/view-bar/components/SortDropdownButton.tsx
+++ b/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>
--- a/front/src/modules/ui/view-bar/components/UpdateViewButtonGroup.tsx
+++ b/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>
--- a/front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/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
--- a/front/src/modules/ui/view-bar/components/ViewsDropdownButton.tsx
+++ b/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(
-  StyledDropdownMenuItemsContainer,
-)`
+const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
  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