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() {

web/themes/custom/caravane/assets/scss/main.scss

@@ -567,6 +567,9 @@ body{
                 max-width: 25%;
                 // grid-column: 16 / span 1;
               }
+              &.liste-etapes-scrollable {
+                align-items: start;
+              }
               @media screen and (min-width: $desktop-min-width) {
                 background: linear-gradient(to right, transparent, #faf1eb);
                 grid-column: 11 / span 6;
@@ -590,6 +593,20 @@ body{
                 &.disapeared {
                   display: none;
                 }
+                &.scrollable {
+                  overflow-y: scroll;
+                  mask-image: linear-gradient(
+                    to bottom,
+                    transparent 0%,
+                    black 7%,
+                    black 85%,
+                    transparent 100%
+                  );
+                  ul {
+                    // padding-top: 0.5rem;
+                    padding-bottom: 1rem;
+                  }
+                }
                 ul {
                   list-style: none;
                   > li {
@@ -746,6 +763,13 @@ body{
                   transition: transform 0.3s ease-out;
                 }
               }
+              .transparent-gradient {
+                position:absolute;
+                z-index:2;
+                right:0; bottom:0; left:0;
+                height:200px;
+                background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
+              }
             }
             > #content-modale {
               padding-bottom: 20vh;
@@ -1247,10 +1271,10 @@ body{
               }
             }
             > #animation-toggle {
+              transition: opacity 0.3s ease-out;
               @media screen and (min-width: $desktop-min-width) {
                 z-index: 5;
               }
-              transition: opacity 0.3s ease-out;
               &.hidden {
                 opacity: 0;
               }