[skip ci] Fix some weird layout on spreadsheet statusbar

plugins/spreadsheet-view/src/SpreadsheetView/components/SpreadsheetView.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { FormGroup, Grid, TablePagination } from '@mui/material'
+import { Grid } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { ResizeHandle } from '@jbrowse/core/ui'
@@ -9,20 +9,14 @@ import ImportWizard from './ImportWizard'
 import Spreadsheet from './Spreadsheet'
 import GlobalFilterControls from './GlobalFilterControls'
 import ColumnFilterControls from './ColumnFilterControls'
-import RowCountMessage from './RowCountMessage'
-import { SpreadsheetModel } from '../models/Spreadsheet'
 import { SpreadsheetViewModel } from '../models/SpreadsheetView'
+import StatusBar from './StatusBar'
 
 const headerHeight = 52
 const colFilterHeight = 46
 const statusBarHeight = 40
 
 const useStyles = makeStyles()(theme => ({
-  root: {
-    position: 'relative',
-    marginBottom: theme.spacing(1),
-    overflow: 'hidden',
-  },
   header: {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
@@ -33,38 +27,6 @@ const useStyles = makeStyles()(theme => ({
   contentArea: {
     overflow: 'auto',
   },
-  columnFilter: {
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-    height: headerHeight,
-    paddingLeft: theme.spacing(1),
-  },
-  viewControls: {
-    margin: 0,
-  },
-  rowCount: {
-    marginLeft: theme.spacing(1),
-  },
-  statusBar: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    height: statusBarHeight,
-    width: '100%',
-    boxSizing: 'border-box',
-    borderTop: '1px outset #b1b1b1',
-    paddingLeft: theme.spacing(1),
-  },
-  verticallyCenter: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column',
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-
   resizeHandle: {
     height: 3,
     position: 'absolute',
@@ -76,52 +38,6 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function StatusBar({
-  page,
-  rowsPerPage,
-  setPage,
-  setRowsPerPage,
-  spreadsheet,
-  mode,
-}: {
-  page: number
-  mode: string
-  spreadsheet: SpreadsheetModel
-  rowsPerPage: number
-  setPage: (arg: number) => void
-  setRowsPerPage: (arg: number) => void
-}) {
-  const { classes } = useStyles()
-  return (
-    <div
-      className={classes.statusBar}
-      style={{ display: mode === 'display' ? undefined : 'none' }}
-    >
-      {spreadsheet ? (
-        <FormGroup row>
-          <div className={classes.verticallyCenter}>
-            <RowCountMessage spreadsheet={spreadsheet} />
-          </div>
-          <div className={classes.spacer} />
-          <TablePagination
-            rowsPerPageOptions={[10, 25, 100, 1000]}
-            count={spreadsheet.rowSet.count}
-            component="div"
-            rowsPerPage={rowsPerPage}
-            page={page}
-            onPageChange={(_, newPage) => setPage(newPage)}
-            onRowsPerPageChange={event => {
-              setRowsPerPage(+event.target.value)
-              setPage(0)
-            }}
-          />
-          <div className={classes.spacer} />
-        </FormGroup>
-      ) : null}
-    </div>
-  )
-}
-
 export default observer(function ({ model }: { model: SpreadsheetViewModel }) {
   const { classes } = useStyles()
   const {
@@ -159,10 +75,7 @@ export default observer(function ({ model }: { model: SpreadsheetViewModel }) {
       {mode === 'import' ? (
         <ImportWizard model={model.importWizard} />
       ) : (
-        <div
-          className={classes.contentArea}
-          style={{ height: height - headerHeight }}
-        >
+        <div className={classes.contentArea}>
           <div
             style={{
               position: 'relative',

plugins/spreadsheet-view/src/SpreadsheetView/components/StatusBar.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { FormGroup, TablePagination } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import RowCountMessage from './RowCountMessage'
+import { SpreadsheetModel } from '../models/Spreadsheet'
+import { observer } from 'mobx-react'
+
+const statusBarHeight = 40
+
+const useStyles = makeStyles()(theme => ({
+  statusBar: {
+    height: statusBarHeight,
+    boxSizing: 'border-box',
+    borderTop: '1px outset #b1b1b1',
+    paddingLeft: theme.spacing(1),
+  },
+  verticallyCenter: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+}))
+
+const StatusBar = observer(function StatusBar({
+  page,
+  rowsPerPage,
+  setPage,
+  setRowsPerPage,
+  spreadsheet,
+  mode,
+}: {
+  page: number
+  mode: string
+  spreadsheet: SpreadsheetModel
+  rowsPerPage: number
+  setPage: (arg: number) => void
+  setRowsPerPage: (arg: number) => void
+}) {
+  const { classes } = useStyles()
+  return (
+    <div
+      className={classes.statusBar}
+      style={{ display: mode === 'display' ? undefined : 'none' }}
+    >
+      {spreadsheet ? (
+        <FormGroup row>
+          <div className={classes.verticallyCenter}>
+            <RowCountMessage spreadsheet={spreadsheet} />
+          </div>
+          <div className={classes.spacer} />
+          <TablePagination
+            rowsPerPageOptions={[10, 25, 100, 1000]}
+            count={spreadsheet.rowSet.count}
+            component="div"
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={(_, newPage) => setPage(newPage)}
+            onRowsPerPageChange={event => {
+              setRowsPerPage(+event.target.value)
+              setPage(0)
+            }}
+          />
+          <div className={classes.spacer} />
+        </FormGroup>
+      ) : null}
+    </div>
+  )
+})
+
+export default StatusBar