diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 6f28702b..9433c09a 100644
--- a/web/app/src/App.vue
+++ b/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 {
diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 2c66562c..31548f7d 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/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.
     };