From 9cebcc9f7cf9db44b9ee86a566e5672265717e6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Sat, 16 Jul 2022 10:51:43 +0200
Subject: [PATCH] Fix T99391: get rid of the last occasional scrollbar in the
 middle column

My way to get things working (I wouldn't call this a "solution" as I don't
know the root cause) was to emit two consecutive "reshuffled" events when
changing tabs in the job details, and to recalculate the table height when
the job type (so not the job itself, but its type info) is loaded.
---
 web/app/src/components/jobs/JobDetails.vue | 16 +++++++++++++---
 web/app/src/views/JobsView.vue             |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index eb51e4c8..6b92e109 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -4,7 +4,7 @@
       <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-small" />
     </div>
 
-    <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
+    <TabsWrapper @clicked-job-details-tab="emit_reshuffled_delayed">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">
           <template v-for="value, key in settingsToDisplay">
@@ -164,6 +164,7 @@ export default {
       if (this.jobData) {
         this._setJobSettings(this.jobData.settings);
       }
+      this.$emit('reshuffled');
     },
 
     _clearJobSettings() {
@@ -204,8 +205,17 @@ export default {
 
       this.simpleSettings = filtered;
       this.$emit('reshuffled');
-    }
-  }
+    },
+    emit_reshuffled_delayed() {
+      const reshuffle = () => { this.$emit('reshuffled'); }
+
+      // Changing tabs requires two sequential "reshuffled" events, at least it
+      // does on Firefox. Not sure what the reason is, but it works to get rid
+      // of the scrollbar.
+      reshuffle();
+      this.$nextTick(reshuffle);
+    },
+  },
 };
 </script>
 
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 59bc74d4..da78507a 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -204,6 +204,7 @@ export default {
           this.jobs.setActiveJob(job);
           // Forward the full job to Tabulator, so that that gets updated too.
           this.$refs.jobsTable.processJobUpdate(job);
+          this._recalcTasksTableHeight();
         });
     },