Web: fix layout of jobs table

This ensures it uses virtual DOM, which is waaaaaaay faster.
CSS variables are used to compute the max height for the Jobs Table grid
cell, to make sure the Tabulator height can be set to 100% without
overflowing.

web/app/src/App.vue

@@ -129,6 +129,12 @@ export default {
 <style>
 @import "tabulator-tables/dist/css/tabulator_midnight.min.css";
 
+:root {
+  --header-height: 25px;
+  --footer-height: 25px;
+  --grid-gap: 4px;
+}
+
 body {
   margin: 0;
 }
@@ -144,7 +150,8 @@ body {
   width: 100%;
   height: 100vh;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 25px 1fr 25px;
+  grid-template-rows: var(--header-height) 1fr var(--footer-height);
+  grid-gap: var(--grid-gap);
   grid-template-areas:
     "header header header"
     "col-1 col-2 col-3"
@@ -176,6 +183,7 @@ h3.sub-title {
 
 .col-1 {
   grid-area: col-1;
+  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 2*var(--grid-gap));
 }
 
 .col-2 {

web/app/src/components/JobsTable.vue

@@ -35,7 +35,7 @@ export default {
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
-      height: "80%",
+      height: "100%",
       data: [], // Will be filled via a Flamenco API request.
       selectable: 1, // Only allow a single row to be selected at a time.
     };