fix(attestation): sticky header don't overlap above preview

app/javascript/controllers/sticky_top_controller.ts

@@ -0,0 +1,43 @@
+import { ApplicationController } from './application_controller';
+
+export class StickyTopController extends ApplicationController {
+  // Ajusts top of sticky top components when there is a sticky header.
+
+  connect(): void {
+    const header = document.getElementById('sticky-header');
+
+    if (!header) {
+      return;
+    }
+
+    this.adjustTop(header);
+
+    window.addEventListener('resize', () => this.adjustTop(header));
+
+    this.listenHeaderMutations(header);
+  }
+
+  private listenHeaderMutations(header: HTMLElement) {
+    const config = { childList: true, subtree: true };
+
+    const callback: MutationCallback = (mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          this.adjustTop(header);
+          break;
+        }
+      }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(header, config);
+  }
+
+  private adjustTop(header: HTMLElement) {
+    const headerHeight = header.clientHeight;
+
+    if (headerHeight > 0) {
+      (this.element as HTMLElement).style.top = `${headerHeight + 8}px`;
+    }
+  }
+}

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -120,7 +120,7 @@
               - c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" }
 
       #preview-column.fr-col-12.fr-col-lg-5.fr-background-alt--blue-france
-        .sticky--top.fr-px-1w
+        .sticky--top.fr-px-1w{ data: { controller: "sticky-top" } }
           .flex.justify-between.align-center
             %h2.fr-h4 Aperçu
             %p= link_to 'Prévisualiser en taille réelle', admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), class: 'fr-link', target: '_blank', rel: 'noopener'