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 b5366db09d836d2047ff327b8600412bf113419f..b7fb6ad96ab6c463d776b275f870d161673f4b69 100644 (file)
--- 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 14c9a9403f790983318741c826a5b0179c9c73c0..57ec3a4af5c515cd9ad0e2eada44c1bba2b9d74f 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;