New: Upstream Updates

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

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/Components/Table/VirtualTable.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { WindowScroller } from 'react-virtualized';
+import { isLocked } from 'Utilities/scrollLock';
 import { scrollDirections } from 'Helpers/Props';
 import Measure from 'Components/Measure';
 import Scroller from 'Components/Scroller/Scroller';
@@ -83,6 +84,16 @@ class VirtualTable extends Component {
     }
   }
 
+  onScroll = (props) => {
+    if (isLocked()) {
+      return;
+    }
+
+    const { onScroll } = this.props;
+
+    onScroll(props);
+  }
+
   //
   // Render
 
@@ -107,7 +118,7 @@ class VirtualTable extends Component {
       <Measure onMeasure={this.onMeasure}>
         <WindowScroller
           scrollElement={isSmallScreen ? undefined : this._contentBodyNode}
-          onScroll={onScroll}
+          onScroll={this.onScroll}
         >
           {({ height, isScrolling }) => {
             return (