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

@@ -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>
 

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();
         });
     },