Adjust CSS of preview modal to cover full screen

[MAILPOET-2743]

assets/css/src/components-form-editor/_preview.scss

@@ -1,6 +1,47 @@
 .mailpoet_spinner_wrapper {
   align-items: center;
+  background: #ffffff;
   display: flex;
   flex-direction: column;
+  height: 100%;
   justify-content: center;
+  width: 100%;
+}
+
+.mailpoet_form_preview_modal {
+  border-radius: 0;
+  margin: 0;
+  min-height: 100%;
+  min-width: 100%;
+  .mailpoet-modal-header {
+    height: 26px;
+    margin-bottom: 0;
+
+    .mailpoet-modal-close {
+      top: 10px;
+    }
+  }
+
+  .mailpoet-modal-content {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .mailpoet_browser_preview {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mailpoet_browser_preview_container {
+    height: 100%;
+  }
+
+  .mailpoet_form_preview_iframe {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+  }
 }

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

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