refactor(web): 💄 tighten up footer to fit more rows on screen

closes #1798

web/src/App.tsx

@@ -22,7 +22,11 @@ const { Header, Content, Footer } = Layout;
 
 export const App: React.FC = () => (
   <Router>
-    <Layout>
+    <Layout
+      style={{
+        background: "#fff",
+      }}
+    >
       <Header style={{ background: "#fff" }}>
         <Logo />
         <Menu mode="horizontal" style={{ lineHeight: "64px" }} />

web/src/hooks/useTablePageSizer.tsx

@@ -17,7 +17,10 @@ export const useTablePageSizer = () => {
 };
 
 const calculateSize = () => ({
-  pageSize: Math.floor((window.innerHeight - 184) / 57),
+  pageSize:
+    window.innerWidth < 576
+      ? Math.floor((window.innerHeight - 215) / 43)
+      : Math.floor((window.innerHeight - 150) / 57),
   isNarrowWindow: window.innerWidth < 576 ? true : false,
   isWideWindow: window.innerWidth > 1918 ? true : false,
 });

web/src/index.css

@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+body > #root > section {
+  height: 100vh;
+}