Display preview on the whole screen

[MAILPOET-2602]

assets/css/src/components/_modal.scss

@@ -155,3 +155,10 @@ $icon-button-size: 36px;
     padding-top: $header-height;
   }
 }
+
+.mailpoet-modal-full-screen {
+  height: 100%;
+  margin: 30px;
+  max-width: 100%;
+  min-width: 95%;
+}

assets/js/src/common/modal/frame.jsx

@@ -15,6 +15,7 @@ function ModalFrame({
   className,
   role,
   style,
+  fullScreen,
 }) {
   const wrapperRef = useRef(null);
   function onClose(event) {
@@ -60,6 +61,7 @@ function ModalFrame({
         ref={wrapperRef}
         className={classnames(
           'mailpoet-modal-frame',
+          { 'mailpoet-modal-full-screen': fullScreen },
           className
         )}
         style={style}
@@ -78,6 +80,7 @@ function ModalFrame({
 ModalFrame.propTypes = {
   onRequestClose: PropTypes.func,
   shouldCloseOnEsc: PropTypes.bool,
+  fullScreen: PropTypes.bool,
   shouldCloseOnClickOutside: PropTypes.bool,
   role: PropTypes.string,
   className: PropTypes.string,
@@ -95,6 +98,7 @@ ModalFrame.defaultProps = {
   onRequestClose: () => {},
   role: 'dialog',
   shouldCloseOnEsc: true,
+  fullScreen: false,
   shouldCloseOnClickOutside: true,
   className: '',
   style: {},

assets/js/src/common/modal/modal.jsx

@@ -20,6 +20,7 @@ function Modal({
   contentClassName,
   contentLabel,
   overlayClassName,
+  fullScreen,
 }) {
   const headingId = aria.labelledby || 'components-modal-header';
 
@@ -36,6 +37,7 @@ function Modal({
       className={contentClassName}
       contentLabel={contentLabel}
       overlayClassName={overlayClassName}
+      fullScreen={fullScreen}
     >
       <div
         className="mailpoet-modal-content"
@@ -64,6 +66,7 @@ Modal.propTypes = {
   title: PropTypes.string,
   onRequestClose: PropTypes.func,
   displayTitle: PropTypes.bool,
+  fullScreen: PropTypes.bool,
   focusOnMount: PropTypes.bool,
   shouldCloseOnEsc: PropTypes.bool,
   shouldCloseOnClickOutside: PropTypes.bool,
@@ -83,6 +86,7 @@ Modal.defaultProps = {
   shouldCloseOnClickOutside: true,
   isDismissible: true,
   displayTitle: true,
+  fullScreen: false,
 };
 
 export default Modal;

assets/js/src/form_editor/components/preview.jsx

@@ -55,6 +55,7 @@ const FormPreview = () => {
     <Modal
       title={MailPoet.I18n.t('formPreview')}
       onRequestClose={onClose}
+      fullScreen
     >
       {form === null && (
         <div className="mailpoet_spinner_wrapper">