From a55423642ae0fcb09a5e534ae15f1fdf18680ac7 Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <97441447+Vardhaman619@users.noreply.github.com>
Date: Wed, 23 Oct 2024 18:43:14 +0530
Subject: [PATCH] fix: context menu padding (#7918)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This pull request addresses the issue #7915 regarding the lack of
padding in the right-click record menu. This PR add padding to context
menu and reuse the existing component used for the filter/sort feature.


![image](https://github.com/user-attachments/assets/4534eba5-a7de-4142-9d5f-ff0aee86a526)

![image](https://github.com/user-attachments/assets/1690890e-cb18-4879-9a9b-3153cd6aeb26)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../RecordIndexActionMenuDropdown.tsx         | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
index 156219f00..5a431d2af 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
@@ -8,6 +8,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
 import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDropdownHotKeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -73,15 +74,19 @@ export const RecordIndexActionMenuDropdown = () => {
         }}
         data-select-disable
         dropdownMenuWidth={width}
-        dropdownComponents={actionMenuEntries.map((item, index) => (
-          <MenuItem
-            key={index}
-            LeftIcon={item.Icon}
-            onClick={item.onClick}
-            accent={item.accent}
-            text={item.label}
-          />
-        ))}
+        dropdownComponents={
+          <DropdownMenuItemsContainer>
+            {actionMenuEntries.map((item, index) => (
+              <MenuItem
+                key={index}
+                LeftIcon={item.Icon}
+                onClick={item.onClick}
+                accent={item.accent}
+                text={item.label}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        }
       />
     </StyledContainerActionMenuDropdown>
   );