fix mobile (#2734)

ec-europa · Jan 25, 2023 · 518a16f · 518a16f
1 parent db00185
commit 518a16f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss b/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss
@@ -46,11 +46,8 @@ $_active-item-background: null !default;
   }
 }
 
-.ecl-site-header__language-container--push-left::before {
-  left: var(--ecl-language-arrow-position);
-}
-
-.ecl-site-header__language-container--push-right::before {
+.ecl-site-header__language-container--push-right::before,
+.ecl-site-header__language-container--full::before {
   left: auto;
   right: var(--ecl-language-arrow-position);
 }
@@ -84,10 +81,6 @@ $_active-item-background: null !default;
   padding: 0 map.get(theme.$spacing, 's') map.get(theme.$spacing, 's');
 }
 
-.ecl-site-header__language-category {
-  width: max-content;
-}
-
 .ecl-site-header__language-category:nth-child(2) {
   border-top: 1px solid $_separator-color;
   margin-top: map.get(theme.$spacing, 'm');
@@ -156,11 +149,6 @@ $_active-item-background: null !default;
   }
 
   // Horizontal position
-  .ecl-site-header__language-container--push-left {
-    left: 0;
-    transform: none;
-  }
-
   .ecl-site-header__language-container--push-right {
     left: auto;
     right: 0;

diff --git a/src/implementations/vanilla/components/site-header/site-header.js b/src/implementations/vanilla/components/site-header/site-header.js
@@ -258,10 +258,6 @@ export class SiteHeader {
           )}-col`
         );
       }
-    } else {
-      this.languageListEu.parentNode.classList.remove(
-        'ecl-site-header__language-content--stack'
-      );
     }
 
     // Check available space
@@ -276,6 +272,7 @@ export class SiteHeader {
     popoverRect = this.languageListOverlay.getBoundingClientRect();
     const screenWidth = window.innerWidth;
 
+    // Popover too large
     if (popoverRect.right > screenWidth) {
       const linkRect = this.languageLink.getBoundingClientRect();
 
@@ -297,6 +294,25 @@ export class SiteHeader {
         `calc(${arrowPosition}px - ${arrowSize})`
       );
     }
+
+    // Mobile popover (full width)
+    if (popoverRect.left === 0) {
+      const linkRect = this.languageLink.getBoundingClientRect();
+
+      // Push the popover to the right
+      this.languageListOverlay.classList.add(
+        'ecl-site-header__language-container--full'
+      );
+
+      // Adapt arrow position
+      const arrowPosition =
+        popoverRect.right - linkRect.right + linkRect.width / 2;
+      const arrowSize = '0.5rem';
+      this.languageListOverlay.style.setProperty(
+        '--ecl-language-arrow-position',
+        `calc(${arrowPosition}px - ${arrowSize})`
+      );
+    }
   }
 
   /**