From b9ba2d9a01f3a2cba1f5bf77087608044c2a5c9b Mon Sep 17 00:00:00 2001
From: Corinne Durrmeyer <corinne@inseo.fr>
Date: Fri, 21 Jun 2024 11:27:44 +0200
Subject: [PATCH] Align contents of language selector list

---
 app/assets/stylesheets/dsfr.scss       | 12 ++++++++++++
 app/assets/stylesheets/new_header.scss | 27 +++++++++++++++-----------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/dsfr.scss b/app/assets/stylesheets/dsfr.scss
index 11343be43..2b312fc36 100644
--- a/app/assets/stylesheets/dsfr.scss
+++ b/app/assets/stylesheets/dsfr.scss
@@ -132,6 +132,18 @@ button.fr-tag-bug {
   }
 }
 
+// on applique le comportement desktop du sélecteur de langue aux terminaux de toute dimension
+.fr-translate .fr-menu__list {
+  display: grid;
+  grid-template-rows: repeat(var(--rows), auto);
+  grid-auto-flow: column;
+}
+
+.fr-translate__language[aria-current]:not([aria-current="false"]) {
+  display: inline-flex;
+}
+
+
 // on veut ajouter un gris plus clair dans le side_menu
 .fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
   color: var(--text-disabled-grey);
diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss
index faee9cf01..77f4bff98 100644
--- a/app/assets/stylesheets/new_header.scss
+++ b/app/assets/stylesheets/new_header.scss
@@ -6,31 +6,36 @@
   }
 }
 
+// Target mobile version
 .fr-header__menu.fr-modal {
-  // Avoid overflow on mobile version
-  // Due to button width
+  // Avoid overflow due to button width
   overflow-x: hidden;
 
   .fr-btn {
     width: auto;
   }
 
-  // Align links & buttons in mobile version
+  // Align links & buttons
   .fr-translate {
     margin-left: 0;
     margin-right: 0;
   }
 
+  // Align list content with other items
+  .fr-menu__list {
+    margin-left: 0.5rem;
+  }
+
+  // Add space between button edge and content
+  .fr-container .fr-header__menu-links .fr-btns-group.flex.align-center .fr-translate.fr-nav .fr-nav__item .fr-translate__btn.fr-btn {
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+
   // Remove border on when there is one item only
   .fr-nav__item:only-child::before {
     box-shadow: none;
   }
 }
-
-// Add space between button edge and content
-#modal-header__menu .fr-translate__btn {
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-}