Fix file preview modal to always open full screen from command menu (#16446)

Closes #16434 




https://github.com/user-attachments/assets/ecf838ea-9f59-42d9-9a2d-97a4fa3b7910

---------

Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
This commit is contained in:
Abdul Rahman
2025-12-10 18:46:57 +05:30
committed by GitHub
parent bc274b9937
commit 1e166ccb53
2 changed files with 8 additions and 3 deletions
@@ -211,6 +211,7 @@ export const AttachmentList = ({
size="large"
isClosable
onClose={handleClosePreview}
ignoreContainer
>
<StyledModalHeader>
<StyledHeader>
@@ -15,6 +15,7 @@ import styled from '@emotion/styled';
import { AnimatePresence, motion } from 'framer-motion';
import React, { useRef } from 'react';
import { createPortal } from 'react-dom';
import { isDefined } from 'twenty-shared/utils';
const StyledModalDiv = styled(motion.div)<{
size?: ModalSize;
padding?: ModalPadding;
@@ -200,6 +201,7 @@ export type ModalProps = React.PropsWithChildren & {
modalVariant?: ModalVariants;
dataGloballyPreventClickOutside?: boolean;
shouldCloseModalOnClickOutsideOrEscape?: boolean;
ignoreContainer?: boolean;
} & (
| { isClosable: true; onClose?: () => void }
| { isClosable?: false; onClose?: never }
@@ -223,11 +225,13 @@ export const Modal = ({
modalVariant = 'primary',
dataGloballyPreventClickOutside = false,
shouldCloseModalOnClickOutsideOrEscape = true,
ignoreContainer = false,
}: ModalProps) => {
const isMobile = useIsMobile();
const modalRef = useRef<HTMLDivElement>(null);
const { container } = useModalContainer();
const isInContainer = container !== null;
const effectiveContainer = ignoreContainer ? null : container;
const isInContainer = isDefined(effectiveContainer);
const theme = useTheme();
@@ -300,8 +304,8 @@ export const Modal = ({
</AnimatePresence>
);
if (container !== null) {
return createPortal(modalContent, container);
if (isDefined(effectiveContainer)) {
return createPortal(modalContent, effectiveContainer);
}
return modalContent;