fix: Keep vertical scrollbar visible in data browser with wide tables

src/dashboard/Data/Browser/Browser.scss

@@ -13,7 +13,8 @@
   left: 300px;
   right: 0;
   bottom: 36px;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 body:global(.expanded) {
@@ -284,3 +285,10 @@ body:global(.expanded) {
 
 .confirmConfig {
   padding: 10px 20px;}
+
+.browserContent {
+  position: relative;
+  min-height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -33,6 +33,7 @@ export default class BrowserTable extends React.Component {
       maxWidth: window.innerWidth - 300,
     };
     this.tableRef = React.createRef();
+    this.browserRef = React.createRef();
     this.handleResize = this.handleResize.bind(this);
     this.updateMaxWidth = this.updateMaxWidth.bind(this);
   }
@@ -42,16 +43,24 @@ export default class BrowserTable extends React.Component {
       this.setState({
         offset: 0,
       });
-      this.tableRef.current.scrollTop = 0;
+      if (this.browserRef.current) {
+        this.browserRef.current.scrollTop = 0;
+      }
     } else if (this.props.newObject !== props.newObject) {
       this.setState({ offset: 0 });
-      this.tableRef.current.scrollTop = 0;
+      if (this.browserRef.current) {
+        this.browserRef.current.scrollTop = 0;
+      }
     } else if (this.props.ordering !== props.ordering) {
       this.setState({ offset: 0 });
-      this.tableRef.current.scrollTop = 0;
+      if (this.browserRef.current) {
+        this.browserRef.current.scrollTop = 0;
+      }
     } else if (this.props.filters.size !== props.filters.size) {
       this.setState({ offset: 0 }, () => {
-        this.tableRef.current.scrollTop = 0;
+        if (this.browserRef.current) {
+          this.browserRef.current.scrollTop = 0;
+        }
       });
     }
   }
@@ -599,52 +608,55 @@ export default class BrowserTable extends React.Component {
       <div
         className={styles.browser}
         id="browser-table"
+        ref={this.browserRef}
         style={{
           right: rightValue,
-          overflowX: this.props.isResizing ? 'hidden' : 'auto',
+          overflowX: 'hidden',
         }}
       >
-        <DataBrowserHeaderBar
-          selected={
-            !!this.props.selection &&
-            !!this.props.data &&
-            this.props.data.length > 0 &&
-            (!!this.props.selection['*'] ||
-              Object.values(this.props.selection).filter(checked => checked).length ===
-                this.props.data.length)
-          }
-          indeterminate={
-            !!this.props.selection &&
-            !!this.props.data &&
-            this.props.data.length > 0 &&
-            !this.props.selection['*'] &&
-            Object.values(this.props.selection).filter(checked => checked).length > 0 &&
-            Object.values(this.props.selection).filter(checked => checked).length !==
-              this.props.data.length
-          }
-          selectAll={checked =>
-            this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
-          }
-          headers={headers}
-          stickyLefts={stickyLefts}
-          freezeIndex={this.props.freezeIndex}
-          freezeColumns={this.props.freezeColumns}
-          unfreezeColumns={this.props.unfreezeColumns}
-          updateOrdering={this.props.updateOrdering}
-          showRowNumber={this.props.showRowNumber}
-          setShowRowNumber={this.props.setShowRowNumber}
-          rowNumberWidth={rowNumberWidth}
-          readonly={!!this.props.relation || !!this.props.isUnique}
-          handleDragDrop={this.props.handleHeaderDragDrop}
-          onResize={this.props.handleResize}
-          onAddColumn={this.props.onAddColumn}
-          preventSchemaEdits={this.context.preventSchemaEdits}
-          isDataLoaded={!!this.props.data}
-          setSelectedObjectId={this.props.setSelectedObjectId}
-          setCurrent={this.props.setCurrent}
-          setContextMenu={this.props.setContextMenu}
-        />
-        {table}
+        <div className={styles.browserContent}>
+          <DataBrowserHeaderBar
+            selected={
+              !!this.props.selection &&
+              !!this.props.data &&
+              this.props.data.length > 0 &&
+              (!!this.props.selection['*'] ||
+                Object.values(this.props.selection).filter(checked => checked).length ===
+                  this.props.data.length)
+            }
+            indeterminate={
+              !!this.props.selection &&
+              !!this.props.data &&
+              this.props.data.length > 0 &&
+              !this.props.selection['*'] &&
+              Object.values(this.props.selection).filter(checked => checked).length > 0 &&
+              Object.values(this.props.selection).filter(checked => checked).length !==
+                this.props.data.length
+            }
+            selectAll={checked =>
+              this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
+            }
+            headers={headers}
+            stickyLefts={stickyLefts}
+            freezeIndex={this.props.freezeIndex}
+            freezeColumns={this.props.freezeColumns}
+            unfreezeColumns={this.props.unfreezeColumns}
+            updateOrdering={this.props.updateOrdering}
+            showRowNumber={this.props.showRowNumber}
+            setShowRowNumber={this.props.setShowRowNumber}
+            rowNumberWidth={rowNumberWidth}
+            readonly={!!this.props.relation || !!this.props.isUnique}
+            handleDragDrop={this.props.handleHeaderDragDrop}
+            onResize={this.props.handleResize}
+            onAddColumn={this.props.onAddColumn}
+            preventSchemaEdits={this.context.preventSchemaEdits}
+            isDataLoaded={!!this.props.data}
+            setSelectedObjectId={this.props.setSelectedObjectId}
+            setCurrent={this.props.setCurrent}
+            setContextMenu={this.props.setContextMenu}
+          />
+          {table}
+        </div>
       </div>
     );
   }