Fix sticky tabs and filters

* expose stickyIndicator from AuditGenerationHeader

* watch for ref updates in AuditGenerationPage

Note that nested stickyIndicator height is used with 2 sticky divs: filters and tabs

confiture-web-app/src/components/audit/AuditGenerationHeader.vue

@@ -43,6 +43,12 @@ defineProps<{
   editUniqueId?: string;
 }>();
 
+const stickyIndicator = ref<HTMLDivElement>();
+
+defineExpose({
+  stickyIndicator
+});
+
 const isOffline = useIsOffline();
 
 const router = useRouter();
@@ -219,7 +225,7 @@ onMounted(() => {
 
   <h1>{{ auditName }}</h1>
 
-  <div id="sticky-indicator" class="sticky-indicator fr-grid-row fr-mb-3w">
+  <div ref="stickyIndicator" class="sticky-indicator fr-grid-row fr-mb-3w">
     <div
       v-if="!systemStore.isOnline"
       id="offlineAlert"

confiture-web-app/src/pages/audit/AuditGenerationPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { sortBy } from "lodash-es";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { onBeforeRouteLeave, useRoute } from "vue-router";
 
 import AraTabs from "../../components/audit/AraTabs.vue";
@@ -16,7 +16,7 @@ import rgaa from "../../criteres.json";
 import { CRITERIA_BY_AUDIT_TYPE } from "../../criteria";
 import { useAuditStore, useFiltersStore, useResultsStore } from "../../store";
 import { AuditPage, AuditType, CriteriumResultStatus } from "../../types";
-import { getCriteriaCount, pluralize, waitForElement } from "../../utils";
+import { getCriteriaCount, pluralize } from "../../utils";
 
 const route = useRoute();
 
@@ -151,13 +151,28 @@ watch(
 );
 
 // Observe the height of the sticky indicator and sync the `top` CSS property with it.
-const stickyTop = ref("0");
+const auditGenerationHeader = ref<InstanceType<
+  typeof AuditGenerationHeader
+> | null>(null);
+
+const stickyTop = ref<string>("0");
+let resizeObserver: ResizeObserver | null = null;
 onMounted(async () => {
-  const el = await waitForElement("#sticky-indicator");
-  const resizeObserver = new ResizeObserver((entries) => {
-    stickyTop.value = entries[0].target.clientHeight + "px";
+  // Because auditGenerationHeader ref is inside a "v-if",
+  // Vue will not instantiate the ref immediately.
+  // We need to watch it before observing nested stickyIndicator
+  watch(auditGenerationHeader, async () => {
+    const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
+    resizeObserver = new ResizeObserver((entries) => {
+      stickyTop.value = entries[0].target.clientHeight + "px";
+    });
+    stickyIndicator && resizeObserver.observe(stickyIndicator);
   });
-  resizeObserver.observe(el);
+});
+
+onBeforeUnmount(() => {
+  const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
+  stickyIndicator && resizeObserver?.unobserve(stickyIndicator);
 });
 
 const pageTitle = computed(() => {
@@ -214,6 +229,7 @@ const tabsData = computed((): TabData[] => {
     />
 
     <AuditGenerationHeader
+      ref="auditGenerationHeader"
       :audit-name="auditStore.currentAudit.procedureName"
       :key-infos="headerInfos"
       :audit-publication-date="auditStore.currentAudit.publicationDate"