Fix action menu modals rendering inside dropdown containers (#16478)

Closes #16363

- Updated modals to open in the full screen by default


<img width="1356" height="940" alt="Screenshot 2025-12-11 at 12 15
15 AM"
src="https://github.com/user-attachments/assets/a27bf2f2-8778-457a-a4ea-e3f3f30de302"
/>

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -117,6 +117,7 @@ export const ConfirmationModal = ({
       padding="large"
       modalVariant={modalVariant}
       dataGloballyPreventClickOutside
+      ignoreContainer
     >
       <StyledCenteredTitle>
         <H1Title title={title} fontColor={H1TitleFontColor.Primary} />

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -230,8 +230,12 @@ export const Modal = ({
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDivElement>(null);
   const { container } = useModalContainer();
-  const effectiveContainer = ignoreContainer ? null : container;
-  const isInContainer = isDefined(effectiveContainer);
+  const effectiveContainer = ignoreContainer
+    ? isDefined(document)
+      ? document.body
+      : null
+    : container;
+  const isInContainer = isDefined(container) && !ignoreContainer;
 
   const theme = useTheme();
 

packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx

@@ -56,6 +56,7 @@ export const Default: Story = {
     title: 'Pariatur labore.',
     subtitle: 'Velit dolore aliquip laborum occaecat fugiat.',
     confirmButtonText: 'Delete',
+    onConfirmClick: fn(),
   },
 };
 
@@ -75,10 +76,10 @@ export const CloseOnEscape: Story = {
     confirmButtonText: 'Confirm',
     onClose: closeMock,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async () => {
+    const body = within(document.body);
 
-    await canvas.findByText('Escape Key Test');
+    await body.findByText('Escape Key Test');
 
     closeMock.mockClear();
 
@@ -98,12 +99,12 @@ export const CloseOnClickOutside: Story = {
     confirmButtonText: 'Confirm',
     onClose: closeMock,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async () => {
+    const body = within(document.body);
 
-    await canvas.findByText('Click Outside Test');
+    await body.findByText('Click Outside Test');
 
-    const backdrop = await canvas.findByTestId('modal-backdrop');
+    const backdrop = await body.findByTestId('modal-backdrop');
 
     // We need to wait for the outside click listener to be registered
     await sleep(100);
@@ -124,10 +125,10 @@ export const ConfirmWithEnterKey: Story = {
     confirmButtonText: 'Confirm',
     onConfirmClick: confirmMock,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async () => {
+    const body = within(document.body);
 
-    await canvas.findByText('Enter Key Test');
+    await body.findByText('Enter Key Test');
 
     await userEvent.keyboard('{Enter}');
 
@@ -145,12 +146,12 @@ export const CancelButtonClick: Story = {
     confirmButtonText: 'Confirm',
     onClose: closeMock,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async () => {
+    const body = within(document.body);
 
-    await canvas.findByText('Cancel Button Test');
+    await body.findByText('Cancel Button Test');
 
-    const cancelButton = await canvas.findByRole('button', {
+    const cancelButton = await body.findByRole('button', {
       name: /Cancel/,
     });
     await userEvent.click(cancelButton);
@@ -169,12 +170,12 @@ export const ConfirmButtonClick: Story = {
     confirmButtonText: 'Confirm',
     onConfirmClick: confirmMock,
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async () => {
+    const body = within(document.body);
 
-    await canvas.findByText('Confirm Button Test');
+    await body.findByText('Confirm Button Test');
 
-    const confirmButton = await canvas.findByRole('button', {
+    const confirmButton = await body.findByRole('button', {
       name: /Confirm/,
     });