fix: adjust modal to full viewport layout

src/editors/containers/TextEditor/index.jsx

@@ -45,6 +45,7 @@ const TextEditor = ({
   if (isLibrary) {
     staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
   }
+  const dynamicHeight = window.innerHeight - 200;
 
   if (!refReady) { return null; }
 
@@ -63,8 +64,8 @@ const TextEditor = ({
         editorRef={editorRef}
         editorContentHtml={editorContent}
         setEditorRef={setEditorRef}
-        minHeight={500}
-        maxHeight={500}
+        minHeight={dynamicHeight}
+        maxHeight={dynamicHeight}
         initializeEditor={initializeEditor}
         {...{
           images,

src/editors/containers/VideoGallery/index.jsx

@@ -15,6 +15,7 @@ import { RequestKeys } from '../../data/constants/requests';
 import videoThumbnail from '../../data/images/videoThumbnail.svg';
 import VideoUploadEditor from '../VideoUploadEditor';
 import VideoEditor from '../VideoEditor';
+import './index.scss';
 
 const VideoGallery = ({ returnFunction, onCancel }) => {
   const intl = useIntl();
@@ -98,6 +99,7 @@ const VideoGallery = ({ returnFunction, onCancel }) => {
           isLoaded,
           isUploadError,
           isFetchError,
+          className: 'video-gallery-modal',
         }}
       />
       <StandardModal
@@ -107,6 +109,7 @@ const VideoGallery = ({ returnFunction, onCancel }) => {
         isOverflowVisible={false}
         size="xl"
         hasCloseButton={false}
+        className="video-upload-modal"
       >
         <div className="editor-page">
           <VideoUploadEditor

src/editors/containers/VideoGallery/index.scss

@@ -0,0 +1,5 @@
+// Video upload modal styles
+.pgn__modal.pgn__modal-xl.pgn__modal-default.video-upload-modal {
+  max-width: 100vw;
+  margin: 0;
+}

src/editors/sharedComponents/SelectionModal/index.jsx

@@ -35,6 +35,7 @@ const SelectionModal = ({
   isFetchError,
   isUploadError,
   isLibrary,
+  className,
 }) => {
   const intl = useIntl();
   const {
@@ -90,7 +91,7 @@ const SelectionModal = ({
           <SearchSort {...searchSortProps} />
         </div>
       )}
-      className="selection-modal"
+      className={`selection-modal ${className || ''}`}
     >
       {/*
         If the modal dialog content is zero height, it shows a bottom shadow
@@ -126,6 +127,7 @@ const SelectionModal = ({
 SelectionModal.defaultProps = {
   size: 'lg',
   isFullscreenScroll: true,
+  className: undefined,
 };
 
 SelectionModal.propTypes = {
@@ -163,6 +165,7 @@ SelectionModal.propTypes = {
   isFetchError: PropTypes.bool.isRequired,
   isUploadError: PropTypes.bool.isRequired,
   isLibrary: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default SelectionModal;

src/editors/sharedComponents/SelectionModal/index.scss

@@ -38,3 +38,18 @@
     max-width: 100%;
     max-height: 100%;
 }
+
+.pgn__modal.pgn__modal-xl.pgn__modal-default.selection-modal.video-gallery-modal {
+    margin: 0;
+    max-width: 100vw;
+    height: 100vh;
+}
+
+.video-gallery-modal ~ .pgn__modal-backdrop {
+    right: unset;
+}
+
+.pgn__modal.pgn__modal-xl.pgn__modal-default.video-gallery-modal {
+    max-width: 100vw;
+    margin: 0;
+}