Web: Set height for Tasks List on load and window resize

Calculate the Tasks List height by subtracting its offsetTop from
the Jobs Details column height.

Known issues:
There is a glitch in which the height can be sometimes longer or shorter
than expected, due to asynchronous loading of other components in Job Details
(such as Job Settings or table filters).

web/app/src/components/TasksTable.vue

@@ -5,7 +5,7 @@
     :activeStatuses="shownStatuses"
     @click="toggleStatusFilter"
   />
-  <div class="task-list-container">
+  <div class="task-list-container" id="task-list-container">
     <div class="task-list" id="flamenco_task_list"></div>
   </div>
 </template>
@@ -74,7 +74,8 @@ export default {
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
-      height: "300px", // Must be set in order for the virtual DOM to function correctly.
+      height: "100%", // Must be set in order for the virtual DOM to function correctly.
+      maxHeight: "100%",
       data: [], // Will be filled via a Flamenco API request.
       selectable: false, // The active task is tracked by click events.
     };
@@ -124,6 +125,8 @@ export default {
       // let tasks = data.tasks.map((j) => API.TaskUpdate.constructFromObject(j));
       this.tabulator.setData(data.tasks);
       this._refreshAvailableStatuses();
+
+      this._setTableHeight();
     },
     processTaskUpdate(taskUpdate) {
       // updateData() will only overwrite properties that are actually set on
@@ -171,7 +174,26 @@ export default {
       if (!row) return
       if (row.reformat) row.reformat();
       else if (row.reinitialize) row.reinitialize(true);
+    },
+    _setTableHeight() {
+      let jobDetailsColumn = document.getElementById('col-job-details');
+      let taskListTable = document.getElementById('task-list-container');
+
+      if (!jobDetailsColumn || !taskListTable) {
+        return;
+      }
+
+      let tableHeight = jobDetailsColumn.clientHeight - taskListTable.offsetTop;
+      this.tabulator.setHeight(tableHeight);
     }
   }
 };
+
+function resizeTasksListTable() {
+  if (window.tasksTableVue) {
+    window.tasksTableVue._setTableHeight();
+  }
+}
+
+window.addEventListener('resize', resizeTasksListTable);
 </script>

web/app/src/views/JobsView.vue

@@ -2,7 +2,7 @@
   <div class="col col-1">
     <jobs-table ref="jobsTable" :activeJobID="jobID" @tableRowClicked="onTableJobClicked" />
   </div>
-  <div class="col col-2">
+  <div class="col col-2" id="col-job-details">
     <job-details :jobData="jobs.activeJob" />
     <tasks-table v-if="hasJobData" ref="tasksTable" :jobID="jobID" :taskID="taskID" @tableRowClicked="onTableTaskClicked" />
   </div>