liste etape scrollable if window too small

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -32,9 +32,42 @@ export const useLayoutStore = defineStore('layout', {
             animationToggle.classList.remove('hidden');
             setTimeout(() => {
                 listeEtape.classList.remove('retracted');
+                this.checkIfEtapeListeShouldScroll();
             }, 300);
             this.isEtapeListRetracted = false;
         },
+        checkIfEtapeListeShouldScroll() {
+          const listeEtape = document.querySelector('#etapes-liste');
+          const column = document.querySelector('.layout__region--third');
+          
+          const columnRect = column.getBoundingClientRect();
+          
+          const listeEtapeContentRect = document.querySelector('#etapes-liste .item-list').getBoundingClientRect();
+          const headerRect = document.querySelector('.layout-container > header').getBoundingClientRect();
+          const animationToggleRect = document.querySelector('.animation-toggle-container').getBoundingClientRect();
+
+          const isIntersecting = headerRect.bottom >= (columnRect.height - listeEtapeContentRect.height) / 2;    
+
+          if (isIntersecting) {
+            this.enableEtapeListeScroll(listeEtape, column, headerRect.height, animationToggleRect.top);
+          } else {
+            this.disableEtapeListeScroll(listeEtape, column);
+          }
+        },
+        enableEtapeListeScroll(listeEtape, column, headerHeight, animationToggleTop) {
+          listeEtape.classList.add('scrollable');
+          column.classList.add('liste-etapes-scrollable');
+
+          listeEtape.style.marginTop = `${headerHeight}px`;
+          listeEtape.style.maxHeight = `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)`;          
+        },
+        disableEtapeListeScroll(listeEtape, column) {
+          listeEtape.classList.remove('scrollable');
+          column.classList.remove('liste-etapes-scrollable');
+
+          listeEtape.style.marginTop = 'unset';
+          listeEtape.style.maxHeight = 'unset';
+        },
         setUpHamburgerToggle(menuBurger, menuContainer) {
           const menuTitle = document.querySelector('#menu-title');
           const menuH2 = document.querySelector('#menu > h2');

web/themes/custom/caravane/assets/js/utils/layout-setup.js

@@ -32,6 +32,11 @@ export function handleReactiveness() {
     });
   })();
 
+  layoutStore.checkIfEtapeListeShouldScroll();
+
+  window.addEventListener('resize', () => {
+    layoutStore.checkIfEtapeListeShouldScroll();
+  });
 }
 
 export function setMenuToggle() {