From e12b5c0d5e5b16a461e37aa79184091ebd356cfb Mon Sep 17 00:00:00 2001
From: emeryro <emery.romain@gmail.com>
Date: Thu, 19 Jan 2023 11:45:44 +0100
Subject: [PATCH] fix mobile

---
 .../_site-header-language-switcher.scss       | 16 ++-----------
 .../components/site-header/site-header.js     | 24 +++++++++++++++----
 2 files changed, 22 insertions(+), 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
index 0af8bc57df1..6dca84807b0 100644
--- 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
index 23d460e62f4..4d7646c2ba7 100644
--- 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})`
+      );
+    }
   }
 
   /**