From 315c7cfde724887dd7721de821b1e0358f4d895b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Thu, 14 Apr 2022 09:39:50 +0200
Subject: [PATCH] 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                  | 10 +++++++++-
 web/app/src/components/JobsTable.vue |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

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.
     };