JobDetail: Emit reshuffled event on tab clicks

This way the tasks table properly resizes, accommodating for the
content changes of the tab group above it.

web/app/src/components/TabsWrapper.vue

@@ -1,10 +1,17 @@
 <script setup>
 import { useSlots, ref, provide } from "vue";
+const emit = defineEmits(['clickedJobDetailsTab',])
 const slots = useSlots();
 
 const tabTitles = ref(slots.default().map((tab) => tab.props.title));
 const selectedTitle = ref(tabTitles.value[0]);
 provide("selectedTitle", selectedTitle);
+
+function updateTabTitle(title) {
+  this.selectedTitle = title;
+  emit('clickedJobDetailsTab');
+}
+
 </script>
 
 <template>
@@ -15,7 +22,7 @@ provide("selectedTitle", selectedTitle);
         :key="title"
         class="tab-item"
         :class="{ active: selectedTitle === title }"
-        @click="selectedTitle = title"
+        @click="updateTabTitle(title)"
       >
         {{ title }}
       </li>

web/app/src/components/jobs/JobDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="hasJobData">
     <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" thumbnailSuffix="-tiny" />
-    <TabsWrapper>
+    <TabsWrapper @clicked-job-details-tab="$emit('reshuffled')">
       <TabItem title="Job Settings">
         <dl v-if="hasSettings">
           <template v-for="value, key in settingsToDisplay">