Merge pull request #10533 from demarches-simplifiees/a11y-fix-mobile-menu-overflow

Supprime le débordement du menu en version mobile sur les terminaux de faible largeur

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);

app/assets/stylesheets/new_header.scss

@@ -5,3 +5,37 @@
     filter: none;
   }
 }
+
+// Target mobile version
+.fr-header__menu.fr-modal {
+  // Avoid overflow due to button width
+  overflow-x: hidden;
+
+  .fr-btn {
+    width: auto;
+  }
+
+  // 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;
+  }
+}

app/views/layouts/_account_dropdown.haml

@@ -1,11 +1,11 @@
 %nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('my_account', scope: [:layouts]) }
   .fr-nav__item
     %button.account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) }
-      %span= current_email
+      %span.fr-mr-1w= current_email
       - if dossier.present? && dossier&.france_connected_with_one_identity?
         %span
            via FranceConnect
-      %span{ class: "fr-badge fr-badge--sm fr-ml-1w #{color_by_role(nav_bar_profile)}" }
+      %span{ class: "fr-badge fr-badge--sm #{color_by_role(nav_bar_profile)}" }
         = t("layouts.#{nav_bar_profile}")
     #account.fr-collapse.fr-menu
       %ul.fr-menu__list.max-content