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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user