From 42c69dd11a6a631dfddc993ad8a36f2704996230 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 20 May 2025 02:38:31 +0530
Subject: [PATCH] fix: Ensure attachment modal appears above Command Menu
 button using createPortal (#12112)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="1509" alt="Screenshot 2025-05-19 at 12 50 48 AM"
src="https://github.com/user-attachments/assets/fba95ecb-015a-4742-bda2-4d515d168c16"
/>


Closes #12092
---
 .../files/components/AttachmentList.tsx       | 94 ++++++++++---------
 1 file changed, 49 insertions(+), 45 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
index 9298caf28..7e5aa44ba 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { lazy, ReactElement, Suspense, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import { DropZone } from '@/activities/files/components/DropZone';
 import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
@@ -184,52 +185,55 @@ export const AttachmentList = ({
           </StyledDropZoneContainer>
         </StyledContainer>
       )}
-      {previewedAttachment && isAttachmentPreviewEnabled && (
-        <StyledModal
-          modalId={PREVIEW_MODAL_ID}
-          size="large"
-          isClosable
-          onClose={handleClosePreview}
-        >
-          <StyledModalHeader>
-            <StyledHeader>
-              <StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
-              <StyledButtonContainer>
-                <IconButton
-                  Icon={IconDownload}
-                  onClick={handleDownload}
-                  size="small"
-                />
-                <IconButton
-                  Icon={IconX}
-                  onClick={handleClosePreview}
-                  size="small"
-                />
-              </StyledButtonContainer>
-            </StyledHeader>
-          </StyledModalHeader>
-          <ScrollWrapper
-            componentInstanceId={`preview-modal-${previewedAttachment.id}`}
+      {previewedAttachment &&
+        isAttachmentPreviewEnabled &&
+        createPortal(
+          <StyledModal
+            modalId={PREVIEW_MODAL_ID}
+            size="large"
+            isClosable
+            onClose={handleClosePreview}
           >
-            <StyledModalContent>
-              <Suspense
-                fallback={
-                  <StyledLoadingContainer>
-                    <StyledLoadingText>
-                      Loading document viewer...
-                    </StyledLoadingText>
-                  </StyledLoadingContainer>
-                }
-              >
-                <DocumentViewer
-                  documentName={previewedAttachment.name}
-                  documentUrl={previewedAttachment.fullPath}
-                />
-              </Suspense>
-            </StyledModalContent>
-          </ScrollWrapper>
-        </StyledModal>
-      )}
+            <StyledModalHeader>
+              <StyledHeader>
+                <StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
+                <StyledButtonContainer>
+                  <IconButton
+                    Icon={IconDownload}
+                    onClick={handleDownload}
+                    size="small"
+                  />
+                  <IconButton
+                    Icon={IconX}
+                    onClick={handleClosePreview}
+                    size="small"
+                  />
+                </StyledButtonContainer>
+              </StyledHeader>
+            </StyledModalHeader>
+            <ScrollWrapper
+              componentInstanceId={`preview-modal-${previewedAttachment.id}`}
+            >
+              <StyledModalContent>
+                <Suspense
+                  fallback={
+                    <StyledLoadingContainer>
+                      <StyledLoadingText>
+                        Loading document viewer...
+                      </StyledLoadingText>
+                    </StyledLoadingContainer>
+                  }
+                >
+                  <DocumentViewer
+                    documentName={previewedAttachment.name}
+                    documentUrl={previewedAttachment.fullPath}
+                  />
+                </Suspense>
+              </StyledModalContent>
+            </ScrollWrapper>
+          </StyledModal>,
+          document.body,
+        )}
     </>
   );
 };