From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Wed, 13 Mar 2024 15:01:48 +0000 (+0100)
Subject: Fix menu horizontal scroll when name is too long
X-Git-Url: https://git.agnieray.net/?p=galette.git;a=commitdiff_plain;h=c860b77a1217e1a7abbc077804d85f07fcd1e0d2

Fix menu horizontal scroll when name is too long

fixes #1805
---

diff --git a/galette/templates/default/elements/logged_user.html.twig b/galette/templates/default/elements/logged_user.html.twig
index b5366db09..b7fb6ad96 100644
--- a/galette/templates/default/elements/logged_user.html.twig
+++ b/galette/templates/default/elements/logged_user.html.twig
@@ -57,7 +57,9 @@
                     </div>
                 </div>
             </nav>
-            {% include "elements/modes.html.twig" %}
+            <div class="ui basic compact fitted segment">
+                {% include "elements/modes.html.twig" %}
+            </div>
         {% else %}
             {% set component_classes = "ui vertical centered tiny icon fluid menu" %}
             <nav id="logoutmenu" class="{{ component_classes }}" aria-label="{{ _T('User menu') }}">
diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index 14c9a9403..57ec3a4af 100644
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -173,6 +173,10 @@ aside .ui.vertical.menu {
   max-width: 100%;
 }
 
+aside .ui.small.compact.fluid.menu .ui.item {
+  max-width: 14.688rem;
+}
+
 .loggedin .content {
   .ui.horizontal.segments.header {
     flex-direction: row-reverse;