fix(mega-menu): Mega menu content position fix - FRONT-4606

src/implementations/twig/components/site-header/ec-site-header.story.js

@@ -306,7 +306,17 @@ const prepareData = (data, args) => {
 
 export default {
   title: 'Components/Site-wide/Site header',
-  decorators: [withNotes, withCode],
+  decorators: [
+    withNotes,
+    withCode,
+    (storyFn) => {
+      document.body.style.position = 'fixed';
+      document.body.style.width = '100%';
+      document.body.style.overflowY = 'scroll';
+
+      return storyFn();
+    },
+  ],
   parameters: { layout: 'fullscreen' },
 };
 

src/implementations/twig/components/site-header/eu-site-header.story.js

@@ -297,7 +297,17 @@ const prepareData = (data, args) => {
 
 export default {
   title: 'Components/Site-wide/Site header',
-  decorators: [withNotes, withCode],
+  decorators: [
+    withNotes,
+    withCode,
+    (storyFn) => {
+      document.body.style.position = 'fixed';
+      document.body.style.width = '100%';
+      document.body.style.overflowY = 'scroll';
+
+      return storyFn();
+    },
+  ],
   parameters: { layout: 'fullscreen' },
 };
 

src/implementations/vanilla/components/mega-menu/mega-menu.js

@@ -130,10 +130,12 @@ export class MegaMenu {
     this.links = null;
     this.isOpen = false;
     this.resizeTimer = null;
+    this.wrappers = null;
     this.isKeyEvent = false;
     this.isDesktop = false;
     this.isLarge = false;
     this.lastVisibleItem = null;
+    this.menuOverlay = null;
     this.currentItem = null;
     this.totalItemsWidth = 0;
     this.breakpointL = 996;
@@ -185,11 +187,13 @@ export class MegaMenu {
     this.links = queryAll(this.linkSelector, this.element);
     this.header = queryOne('.ecl-site-header', document);
     this.headerBanner = queryOne('.ecl-site-header__banner', document);
+    this.wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
     this.headerNotification = queryOne(
       '.ecl-site-header__notification',
       document,
     );
     this.toggleLabel = queryOne('.ecl-button__label', this.open);
+    this.menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
 
     // Check if we should use desktop display (it does not rely only on breakpoints)
     this.isDesktop = this.useDesktopDisplay();
@@ -440,18 +444,14 @@ export class MegaMenu {
    * Disable page scrolling
    */
   disableScroll() {
-    const scrollBarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
     document.body.classList.add('ecl-mega-menu-prevent-scroll');
-    document.body.style.paddingRight = `${scrollBarWidth}px`;
   }
 
   /**
    * Enable page scrolling
    */
   enableScroll() {
     document.body.classList.remove('ecl-mega-menu-prevent-scroll');
-    document.body.style.paddingRight = '';
   }
 
   /**
@@ -501,9 +501,8 @@ export class MegaMenu {
       });
 
       // Reset top position and height of the wrappers
-      const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
-      if (wrappers) {
-        wrappers.forEach((wrapper) => {
+      if (this.wrappers) {
+        this.wrappers.forEach((wrapper) => {
           wrapper.style.top = '';
           wrapper.style.height = '';
         });
@@ -790,7 +789,6 @@ export class MegaMenu {
    * Dinamically set the position of the menu overlay
    */
   positionMenuOverlay() {
-    const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
     let availableHeight = 0;
     if (!this.isDesktop) {
       // In mobile, we get the bottom position of the site header header
@@ -799,8 +797,8 @@ export class MegaMenu {
           const position = this.header.getBoundingClientRect();
           const bottomPosition = Math.round(position.bottom);
 
-          if (menuOverlay) {
-            menuOverlay.style.top = `${bottomPosition}px`;
+          if (this.menuOverlay) {
+            this.menuOverlay.style.top = `${bottomPosition}px`;
           }
           if (this.inner) {
             this.inner.style.top = `${bottomPosition}px`;
@@ -842,9 +840,8 @@ export class MegaMenu {
               }
             }
           }
-          const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
-          if (wrappers) {
-            wrappers.forEach((wrapper) => {
+          if (this.wrappers) {
+            this.wrappers.forEach((wrapper) => {
               wrapper.style.top = '';
               wrapper.style.height = '';
             });
@@ -861,20 +858,19 @@ export class MegaMenu {
           const item = queryOne(this.itemSelector, this.element);
           const rect = item.getBoundingClientRect();
           const rectHeight = rect.height;
-          const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
 
-          if (wrappers) {
-            wrappers.forEach((wrapper) => {
+          if (this.wrappers) {
+            this.wrappers.forEach((wrapper) => {
               wrapper.style.top = `${rectHeight}px`;
             });
           }
-          if (menuOverlay) {
-            menuOverlay.style.top = `${headerBottom}px`;
+          if (this.menuOverlay) {
+            this.menuOverlay.style.top = `${headerBottom}px`;
           }
         } else {
           const bottomPosition = this.element.getBoundingClientRect().bottom;
-          if (menuOverlay) {
-            menuOverlay.style.top = `${bottomPosition}px`;
+          if (this.menuOverlay) {
+            this.menuOverlay.style.top = `${bottomPosition}px`;
           }
         }
       }, 0);

src/implementations/vanilla/components/mega-menu/mega-menu.scss

@@ -804,13 +804,9 @@ $mega-menu: null !default;
   color: map.get($mega-menu, 'mobile', 'item-color');
   padding: map.get($mega-menu, 'mobile', 'subitem-padding');
   position: relative;
-  display: -webkit-box;
   line-height: map.get($theme, 'line-height-ui', 'xs');
   min-height: 42px;
-  text-align: left;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  text-align: initial;
   width: 100%;
 
   &.ecl-link--icon:not(.ecl-mega-menu__parent-link) {
@@ -821,13 +817,6 @@ $mega-menu: null !default;
       height: calc(var(--s-s) + 0.5px);
       padding: 1px 3px;
     }
-
-    .ecl-link__label {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
   }
 
   &:hover {
@@ -1407,5 +1396,7 @@ $mega-menu: null !default;
 }
 
 .ecl-mega-menu-prevent-scroll {
-  overflow: hidden;
+  position: fixed;
+  overflow-y: scroll;
+  width: 100%;
 }