From 5dae53c1c572c1cb662e17fbd47602b81f39f8aa Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 15:30:40 +0200
Subject: [PATCH] Web: Adjust size of tables

* Do not set height of table manually.
* Set the width of ID cells as characters, instead of percentage.
---
 web/app/src/components/JobsTable.vue  | 4 ++--
 web/app/src/components/TasksTable.vue | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 86e4bb31..221517e6 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h2 class="column-title">Jobs</h2>
+
     <job-actions-bar />
     <div class="job-list" id="flamenco_job_list"></div>
   </div>
@@ -24,7 +25,7 @@ export default {
       // See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate.
       columns: [
         { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerHozAlign: "center", headerSort: false },
-        { title: 'ID', field: 'id', sorter: 'string', width: "12%" },
+        { title: 'ID', field: 'id', sorter: 'string', width: "13ch" },
         { title: 'Name', field: 'name', sorter: 'string' },
         { title: 'Status', field: 'status', sorter: 'string' },
         { title: 'Type', field: 'type', sorter: 'string' },
@@ -44,7 +45,6 @@ export default {
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
-      height: "99%",
       data: [], // Will be filled via a Flamenco API request.
       selectable: 1, // Only allow a single row to be selected at a time.
     };
diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index 4680616e..0977f891 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -27,7 +27,7 @@ export default {
       // See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate.
       columns: [
         { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerHozAlign: "center", headerSort: false },
-        { title: 'ID', field: 'id', sorter: 'string', width: "12%" },
+        { title: 'ID', field: 'id', sorter: 'string', width: "13ch" },
         { title: 'Name', field: 'name', sorter: 'string' },
         { title: 'Status', field: 'status', sorter: 'string' },
         {
@@ -45,7 +45,6 @@ export default {
       initialSort: [
         { column: "updated", dir: "desc" },
       ],
-      height: "300px",
       data: [], // Will be filled via a Flamenco API request.
       selectable: 1, // Only allow a single row to be selected at a time.
     };