From 9e051d7900427ea345352089d2282a9d637683ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:19:01 +0100
Subject: [PATCH] 8304 - Fix Action Menu Buttons Alignment (#8348)

Closes #8304

The position of the modal container wasn't absolute, so the gap was also
applied after the `ShowPageMoreButton`
---
 .../ActionMenuConfirmationModals.tsx          |  9 +++++++--
 .../pages/object-record/RecordShowPage.tsx    | 20 +++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx b/packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx
index 0b3e52032..2dd9ab907 100644
--- a/packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx
@@ -1,5 +1,10 @@
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
+
+const StyledActionMenuConfirmationModals = styled.div`
+  position: absolute;
+`;
 
 export const ActionMenuConfirmationModals = () => {
   const actionMenuEntries = useRecoilComponentValueV2(
@@ -7,12 +12,12 @@ export const ActionMenuConfirmationModals = () => {
   );
 
   return (
-    <div data-select-disable>
+    <StyledActionMenuConfirmationModals data-select-disable>
       {actionMenuEntries.map((actionMenuEntry, index) =>
         actionMenuEntry.ConfirmationModal ? (
           <div key={index}>{actionMenuEntry.ConfirmationModal}</div>
         ) : null,
       )}
-    </div>
+    </StyledActionMenuConfirmationModals>
   );
 };
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index 77370c2da..5e02947eb 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -65,17 +65,15 @@ export const RecordShowPage = () => {
                     workflowVersionId={objectRecordId}
                   />
                 ) : (
-                  <>
-                    <RecordShowActionMenu
-                      {...{
-                        isFavorite,
-                        handleFavoriteButtonClick,
-                        record,
-                        objectMetadataItem,
-                        objectNameSingular,
-                      }}
-                    />
-                  </>
+                  <RecordShowActionMenu
+                    {...{
+                      isFavorite,
+                      handleFavoriteButtonClick,
+                      record,
+                      objectMetadataItem,
+                      objectNameSingular,
+                    }}
+                  />
                 )}
               </>
             </RecordShowPageHeader>