Fixed: Scrolling of modals with tabular content in iOS

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Album/Search/AlbumInteractiveSearchModalContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { scrollDirections } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalHeader from 'Components/Modal/ModalHeader';
@@ -20,7 +21,7 @@ function AlbumInteractiveSearchModalContent(props) {
         Interactive Search  {albumId != null && `- ${albumTitle}`}
       </ModalHeader>
 
-      <ModalBody>
+      <ModalBody scrollDirection={scrollDirections.BOTH}>
         <InteractiveSearchConnector
           type="album"
           searchPayload={{

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -144,6 +144,7 @@ class FileBrowserModalContent extends Component {
           <Scroller
             ref={this.setScrollerRef}
             className={styles.scroller}
+            scrollDirection={scrollDirections.BOTH}
           >
             {
               !!error &&
@@ -152,7 +153,10 @@ class FileBrowserModalContent extends Component {
 
             {
               isPopulated && !error &&
-                <Table columns={columns}>
+                <Table
+                  horizontalScroll={false}
+                  columns={columns}
+                >
                   <TableBody>
                     {
                       emptyParent &&

frontend/src/Components/Modal/ModalBody.js

@@ -48,7 +48,7 @@ ModalBody.propTypes = {
   className: PropTypes.string,
   innerClassName: PropTypes.string,
   children: PropTypes.node,
-  scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL])
+  scrollDirection: PropTypes.oneOf(scrollDirections.all)
 };
 
 ModalBody.defaultProps = {

frontend/src/Components/Scroller/Scroller.css

@@ -2,6 +2,7 @@
   @add-mixin scrollbar;
   @add-mixin scrollbarTrack;
   @add-mixin scrollbarThumb;
+  -webkit-overflow-scrolling: touch;
 }
 
 .none {
@@ -26,3 +27,11 @@
     overflow-x: auto;
   }
 }
+
+.both {
+  overflow: scroll;
+
+  &.autoScroll {
+    overflow: auto;
+  }
+}

frontend/src/Components/Scroller/Scroller.js

@@ -66,7 +66,7 @@ class Scroller extends Component {
 
 Scroller.propTypes = {
   className: PropTypes.string,
-  scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired,
+  scrollDirection: PropTypes.oneOf(scrollDirections.all).isRequired,
   autoScroll: PropTypes.bool.isRequired,
   scrollTop: PropTypes.number,
   children: PropTypes.node,

frontend/src/Components/Table/Table.css

@@ -1,5 +1,7 @@
 .tableContainer {
-  overflow-x: auto;
+  &.horizontalScroll {
+    overflow-x: auto;
+  }
 }
 
 .table {
@@ -10,7 +12,12 @@
 
 @media only screen and (max-width: $breakpointSmall) {
   .tableContainer {
-    overflow-y: hidden;
-    width: 100%;
+    min-width: 100%;
+    width: fit-content;
+
+    &.horizontalScroll {
+      overflow-y: hidden;
+      width: 100%;
+    }
   }
 }

frontend/src/Components/Table/Table.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import { icons, scrollDirections } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import Scroller from 'Components/Scroller/Scroller';
@@ -28,6 +29,7 @@ function getTableHeaderCellProps(props) {
 function Table(props) {
   const {
     className,
+    horizontalScroll,
     selectAll,
     columns,
     optionsComponent,
@@ -41,14 +43,22 @@ function Table(props) {
 
   return (
     <Scroller
-      className={styles.tableContainer}
-      scrollDirection={scrollDirections.HORIZONTAL}
+      className={classNames(
+        styles.tableContainer,
+        horizontalScroll && styles.horizontalScroll
+      )}
+      scrollDirection={
+        horizontalScroll ?
+          scrollDirections.HORIZONTAL :
+          scrollDirections.NONE
+      }
     >
       <table className={className}>
         <TableHeader>
           {
-            selectAll &&
-              <TableSelectAllHeaderCell {...otherProps} />
+            selectAll ?
+              <TableSelectAllHeaderCell {...otherProps} /> :
+              null
           }
 
           {
@@ -111,6 +121,7 @@ function Table(props) {
 
 Table.propTypes = {
   className: PropTypes.string,
+  horizontalScroll: PropTypes.bool.isRequired,
   selectAll: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   optionsComponent: PropTypes.elementType,
@@ -123,6 +134,7 @@ Table.propTypes = {
 
 Table.defaultProps = {
   className: styles.table,
+  horizontalScroll: true,
   selectAll: false
 };
 

frontend/src/Helpers/Props/scrollDirections.js

@@ -1,5 +1,6 @@
 export const NONE = 'none';
+export const BOTH = 'both';
 export const HORIZONTAL = 'horizontal';
 export const VERTICAL = 'vertical';
 
-export const all = [NONE, HORIZONTAL, VERTICAL];
+export const all = [NONE, HORIZONTAL, VERTICAL, BOTH];

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -5,7 +5,7 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
-import { align, icons, kinds } from 'Helpers/Props';
+import { align, icons, kinds, scrollDirections } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -305,7 +305,7 @@ class InteractiveImportModalContent extends Component {
           Manual Import - {title || folder}
         </ModalHeader>
 
-        <ModalBody>
+        <ModalBody scrollDirection={scrollDirections.BOTH}>
           <div className={styles.filterContainer}>
             {
               showFilterExistingFiles &&
@@ -393,6 +393,7 @@ class InteractiveImportModalContent extends Component {
             isPopulated && !!items.length && !isFetching && !isFetching &&
               <Table
                 columns={columns}
+                horizontalScroll={false}
                 selectAll={true}
                 allSelected={allSelected}
                 allUnselected={allUnselected}