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 0a684c0693f198e2e9c2efb33dd7a4719f926146..552c00f874fa788ce6a1456f49be9172ef0cfeb4 100644 (file)
--- a/galette/templates/default/elements/logged_user.html.twig
+++ b/galette/templates/default/elements/logged_user.html.twig
@@ -77,7 +77,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 9974b2b336198893cf28e20b61ebf832b4578696..52cc31ec1a0548b3042d3472d408bf785cbf8659 100644 (file)
--- 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;