admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: attachment scroll issue in preview modal (#10925)

Browse Source 
Fixes #10919

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Anoop P
2025-03-18 15:17:11 +05:30
committed by GitHub
parent aa6fd90424
commit 0f85d5b94b
1 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
View File

@ -12,6 +12,7 @@ import { Modal } from '@/ui/layout/modal/components/Modal';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { ActivityList } from '@/activities/components/ActivityList'; import { ActivityList } from '@/activities/components/ActivityList';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { AttachmentRow } from './AttachmentRow'; import { AttachmentRow } from './AttachmentRow';
const DocumentViewer = lazy(() => const DocumentViewer = lazy(() =>
@ -83,6 +84,7 @@ const StyledHeader = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
min-height: 40px;
`; `;
const StyledModalTitle = styled.span` const StyledModalTitle = styled.span`
@ -90,12 +92,17 @@ const StyledModalTitle = styled.span`
`; `;
const StyledModalHeader = styled(Modal.Header)` const StyledModalHeader = styled(Modal.Header)`
height: auto;
padding: 0; padding: 0;
`; `;
const StyledModalContent = styled(Modal.Content)` const StyledModalContent = styled(Modal.Content)`
padding-left: 0; padding: 0;
padding-right: 0; `;
const StyledModal = styled(Modal)`
gap: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(3)};
`; `;
const StyledButtonContainer = styled.div` const StyledButtonContainer = styled.div`
@ -169,7 +176,7 @@ export const AttachmentList = ({
</StyledContainer> </StyledContainer>
)} )}
{previewedAttachment && isAttachmentPreviewEnabled && ( {previewedAttachment && isAttachmentPreviewEnabled && (
<Modal size="large" isClosable onClose={handleClosePreview}> <StyledModal size="large" isClosable onClose={handleClosePreview}>
<StyledModalHeader> <StyledModalHeader>
<StyledHeader> <StyledHeader>
<StyledModalTitle>{previewedAttachment.name}</StyledModalTitle> <StyledModalTitle>{previewedAttachment.name}</StyledModalTitle>
@ -187,23 +194,30 @@ export const AttachmentList = ({
</StyledButtonContainer> </StyledButtonContainer>
</StyledHeader> </StyledHeader>
</StyledModalHeader> </StyledModalHeader>
<StyledModalContent> <ScrollWrapper
<Suspense contextProviderName="modalContent"
fallback={ componentInstanceId={`preview-modal-${previewedAttachment.id}`}
<StyledLoadingContainer> scrollbarVariant="no-padding"
<StyledLoadingText> heightMode="fit-content"
Loading document viewer... >
</StyledLoadingText> <StyledModalContent>
</StyledLoadingContainer> <Suspense
} fallback={
> <StyledLoadingContainer>
<DocumentViewer <StyledLoadingText>
documentName={previewedAttachment.name} Loading document viewer...
documentUrl={previewedAttachment.fullPath} </StyledLoadingText>
/> </StyledLoadingContainer>
</Suspense> }
</StyledModalContent> >
</Modal> <DocumentViewer
documentName={previewedAttachment.name}
documentUrl={previewedAttachment.fullPath}
/>
</Suspense>
</StyledModalContent>
</ScrollWrapper>
</StyledModal>
)} )}
</> </>
); );