fix: video selection gallery scroll (#477)

* fix: video selection gallery scroll

* fix: lint errors

Author: KristinAoki

src/editors/containers/VideoEditor/components/BaseModal.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Button } from '@openedx/paragon';
 
 import { thunkActions } from '../../../data/redux';
-import BaseModal from './BaseModal';
+import BaseModal from '../../../sharedComponents/BaseModal';
 import * as module from './SelectVideoModal';
 
 export const hooks = {

src/editors/containers/VideoEditor/components/SelectVideoModal.jsx

@@ -56,28 +56,30 @@ export const VideoGallery = () => {
   );
 
   return (
-    <SelectionModal
-      {...{
-        isOpen: true,
-        close: handleCancel,
-        size: 'fullscreen',
-        isFullscreenScroll: false,
-        galleryError,
-        inputError,
-        fileInput,
-        galleryProps: {
-          ...galleryProps,
-          thumbnailFallback,
-        },
-        searchSortProps,
-        selectBtnProps,
-        acceptedFiles: acceptedImgKeys,
-        modalMessages,
-        isLoaded,
-        isUploadError,
-        isFetchError,
-      }}
-    />
+    <div style={isLoaded ? { backgroundColor: '#E9E6E4' } : {}}>
+      <SelectionModal
+        {...{
+          isOpen: true,
+          close: handleCancel,
+          size: 'fullscreen',
+          isFullscreenScroll: false,
+          galleryError,
+          inputError,
+          fileInput,
+          galleryProps: {
+            ...galleryProps,
+            thumbnailFallback,
+          },
+          searchSortProps,
+          selectBtnProps,
+          acceptedFiles: acceptedImgKeys,
+          modalMessages,
+          isLoaded,
+          isUploadError,
+          isFetchError,
+        }}
+      />
+    </div>
   );
 };
 

src/editors/containers/VideoGallery/index.jsx

@@ -23,11 +23,13 @@ exports[`BaseModal ImageUploadModal template component snapshot 1`] = `
       props.title node
     </ModalDialog.Title>
   </ModalDialog.Header>
-  <ModalDialog.Body
+  <Scrollable
     style={null}
   >
-    props.children node
-  </ModalDialog.Body>
+    <ModalDialog.Body>
+      props.children node
+    </ModalDialog.Body>
+  </Scrollable>
   <ModalDialog.Footer>
     <ActionRow>
       props.footerAction node

src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {
   ActionRow,
   ModalDialog,
+  Scrollable,
 } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -39,9 +40,11 @@ export const BaseModal = ({
       </ModalDialog.Title>
       {headerComponent}
     </ModalDialog.Header>
-    <ModalDialog.Body style={bodyStyle}>
-      {children}
-    </ModalDialog.Body>
+    <Scrollable style={bodyStyle}>
+      <ModalDialog.Body>
+        {children}
+      </ModalDialog.Body>
+    </Scrollable>
     <ModalDialog.Footer>
       <ActionRow>
         {footerAction}

src/editors/sharedComponents/BaseModal/index.jsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  Scrollable, Spinner,
-} from '@openedx/paragon';
+import { Spinner } from '@openedx/paragon';
 import {
   FormattedMessage,
   useIntl,
@@ -59,26 +57,24 @@ export const Gallery = ({
     );
   }
   return (
-    <Scrollable className="gallery bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
-      <div className="p-4">
-        <SelectableBox.Set
-          columns={1}
-          name="images"
-          onChange={onHighlightChange}
-          type="radio"
-          value={highlighted}
-        >
-          { displayList.map(asset => (
-            <GalleryCard
-              key={asset.id}
-              asset={asset}
-              showId={showIdsOnCards}
-              thumbnailFallback={thumbnailFallback}
-            />
-          )) }
-        </SelectableBox.Set>
-      </div>
-    </Scrollable>
+    <div className="p-4 gallery bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
+      <SelectableBox.Set
+        columns={1}
+        name="images"
+        onChange={onHighlightChange}
+        type="radio"
+        value={highlighted}
+      >
+        { displayList.map(asset => (
+          <GalleryCard
+            key={asset.id}
+            asset={asset}
+            showId={showIdsOnCards}
+            thumbnailFallback={thumbnailFallback}
+          />
+        )) }
+      </SelectableBox.Set>
+    </div>
   );
 };
 

src/editors/sharedComponents/SelectionModal/Gallery.jsx

@@ -81,7 +81,7 @@ export const SelectionModal = ({
         </Button>
       )}
       title={intl.formatMessage(titleMsg)}
-      bodyStyle={{ background, padding: '3px 24px' }}
+      bodyStyle={{ background }}
       headerComponent={(
         <div style={{ margin: '18px 0' }}>
           <SearchSort {...searchSortProps} />

src/editors/sharedComponents/SelectionModal/index.jsx

@@ -21,7 +21,7 @@
 }
 
 /* Set top padding to 0 when there is an alert above. */
-.selection-modal .pgn__vstack > .alert + .gallery > .pgn__scrollable-body-content > .p-4 {
+.selection-modal .pgn__scrollable-body-content > .pgn__vstack > .alert + .gallery > .p-4 {
     padding-top: 0 !important;
 }
 

src/editors/sharedComponents/SelectionModal/index.scss

@@ -2,7 +2,11 @@
 
 exports[`SourceCodeModal renders as expected with default behavior 1`] = `
 <BaseModal
-  bodyStyle={null}
+  bodyStyle={
+    Object {
+      "maxHeight": NaN,
+    }
+  }
   close={[MockFunction]}
   confirmAction={
     <Button
@@ -32,11 +36,7 @@ exports[`SourceCodeModal renders as expected with default behavior 1`] = `
   title="Edit Source Code"
 >
   <div
-    style={
-      Object {
-        "padding": "10px 30px",
-      }
-    }
+    className="px-4.5 pt-2.5"
   >
     <injectIntl(ShimmedIntlComponent)
       innerRef="moCKrEf"

src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap

@@ -7,7 +7,7 @@ import {
   intlShape,
 } from '@edx/frontend-platform/i18n';
 
-import { Button } from '@openedx/paragon';
+import { Button, useWindowSize } from '@openedx/paragon';
 import messages from './messages';
 import hooks from './hooks';
 import BaseModal from '../BaseModal';
@@ -22,6 +22,8 @@ export const SourceCodeModal = ({
   intl,
 }) => {
   const { saveBtnProps, value, ref } = hooks.prepareSourceCodeModal({ editorRef, close });
+  const { height } = useWindowSize();
+
   return (
     <BaseModal
       close={close}
@@ -33,8 +35,9 @@ export const SourceCodeModal = ({
             )}
       isOpen={isOpen}
       title={intl.formatMessage(messages.titleLabel)}
+      bodyStyle={{ maxHeight: (height - 180) }}
     >
-      <div style={{ padding: '10px 30px' }}>
+      <div className="px-4.5 pt-2.5">
         <CodeEditor
           innerRef={ref}
           value={value}