From 0f85d5b94bd18b2224ed83b36ea7c70a9d5a9fd4 Mon Sep 17 00:00:00 2001
From: Anoop P <44577841+anoopw3bdev@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:17:11 +0530
Subject: [PATCH] fix: attachment scroll issue in preview modal (#10925)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #10919

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../files/components/AttachmentList.tsx       | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 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 7b8defff9..0d48f8a60 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
@@ -12,6 +12,7 @@ import { Modal } from '@/ui/layout/modal/components/Modal';
 import { useRecoilValue } from 'recoil';
 
 import { ActivityList } from '@/activities/components/ActivityList';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { AttachmentRow } from './AttachmentRow';
 
 const DocumentViewer = lazy(() =>
@@ -83,6 +84,7 @@ const StyledHeader = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
+  min-height: 40px;
 `;
 
 const StyledModalTitle = styled.span`
@@ -90,12 +92,17 @@ const StyledModalTitle = styled.span`
 `;
 
 const StyledModalHeader = styled(Modal.Header)`
+  height: auto;
   padding: 0;
 `;
 
 const StyledModalContent = styled(Modal.Content)`
-  padding-left: 0;
-  padding-right: 0;
+  padding: 0;
+`;
+
+const StyledModal = styled(Modal)`
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(3)};
 `;
 
 const StyledButtonContainer = styled.div`
@@ -169,7 +176,7 @@ export const AttachmentList = ({
         </StyledContainer>
       )}
       {previewedAttachment && isAttachmentPreviewEnabled && (
-        <Modal size="large" isClosable onClose={handleClosePreview}>
+        <StyledModal size="large" isClosable onClose={handleClosePreview}>
           <StyledModalHeader>
             <StyledHeader>
               <StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
@@ -187,23 +194,30 @@ export const AttachmentList = ({
               </StyledButtonContainer>
             </StyledHeader>
           </StyledModalHeader>
-          <StyledModalContent>
-            <Suspense
-              fallback={
-                <StyledLoadingContainer>
-                  <StyledLoadingText>
-                    Loading document viewer...
-                  </StyledLoadingText>
-                </StyledLoadingContainer>
-              }
-            >
-              <DocumentViewer
-                documentName={previewedAttachment.name}
-                documentUrl={previewedAttachment.fullPath}
-              />
-            </Suspense>
-          </StyledModalContent>
-        </Modal>
+          <ScrollWrapper
+            contextProviderName="modalContent"
+            componentInstanceId={`preview-modal-${previewedAttachment.id}`}
+            scrollbarVariant="no-padding"
+            heightMode="fit-content"
+          >
+            <StyledModalContent>
+              <Suspense
+                fallback={
+                  <StyledLoadingContainer>
+                    <StyledLoadingText>
+                      Loading document viewer...
+                    </StyledLoadingText>
+                  </StyledLoadingContainer>
+                }
+              >
+                <DocumentViewer
+                  documentName={previewedAttachment.name}
+                  documentUrl={previewedAttachment.fullPath}
+                />
+              </Suspense>
+            </StyledModalContent>
+          </ScrollWrapper>
+        </StyledModal>
       )}
     </>
   );