chore: tweak cell style (#388)

apis/nucleus/src/components/Footer.jsx

@@ -1,16 +1,25 @@
 import React from 'react';
 
-import { Typography, Grid } from '@material-ui/core';
+import { makeStyles, Typography, Grid } from '@material-ui/core';
 
-const Footer = ({ layout }) =>
-  layout && layout.showTitles && layout.footnote ? (
+const useStyles = makeStyles(theme => ({
+  itemStyle: {
+    minWidth: 0,
+    paddingTop: theme.spacing(1),
+  },
+}));
+
+const Footer = ({ layout }) => {
+  const { itemStyle } = useStyles();
+  return layout && layout.showTitles && layout.footnote ? (
     <Grid container>
-      <Grid item style={{ minWidth: 0 }}>
+      <Grid item className={itemStyle}>
         <Typography noWrap variant="body2">
           {layout.footnote}
         </Typography>
       </Grid>
     </Grid>
   ) : null;
+};
 
 export default Footer;

apis/nucleus/src/components/Header.jsx

@@ -1,15 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
-import { Grid, Typography } from '@material-ui/core';
-
+import { makeStyles, Grid, Typography } from '@material-ui/core';
 import SelectionToolbarWithDefault from './SelectionToolbar';
 
+const useStyles = makeStyles(theme => ({
+  containerStyle: {
+    flexGrow: 0,
+    paddingBottom: theme.spacing(1),
+  },
+  itemsStyle: {
+    whiteSpace: 'nowrap',
+    minHeight: '32px',
+  },
+}));
+
 const Header = ({ layout, sn }) => {
   const showTitle = layout && layout.showTitles && !!layout.title;
   const showSubtitle = layout && layout.showTitles && !!layout.subtitle;
   const showInSelectionActions = sn && layout && layout.qSelectionInfo && layout.qSelectionInfo.qInSelections;
-
   const [items, setItems] = useState([]);
+  const { containerStyle, itemsStyle } = useStyles();
 
   useEffect(() => {
     if (!sn || !sn.component || !sn.component.isHooked) {
@@ -19,7 +29,7 @@ const Header = ({ layout, sn }) => {
   }, [sn]);
 
   return (
-    <Grid item container wrap="nowrap" style={{ flexGrow: 0 }}>
+    <Grid item container wrap="nowrap" className={containerStyle}>
       <Grid item zeroMinWidth xs>
         <Grid container wrap="nowrap" direction="column">
           {showTitle && (
@@ -34,7 +44,7 @@ const Header = ({ layout, sn }) => {
           )}
         </Grid>
       </Grid>
-      <Grid item style={{ whiteSpace: 'nowrap', minHeight: '32px' }}>
+      <Grid item className={itemsStyle}>
         {showInSelectionActions && (
           <SelectionToolbarWithDefault
             inline