Fix preferences tabs display on small screens

fixes #1799

diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 8459ffb88da3c01e10796c068b81ccbbc6635174..5473a221eb39ebdf39ff59d4fc512877861ee128 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
         <form action="{{ url_for('store-preferences') }}" method="post" enctype="multipart/form-data" class="ui form">
-        <div class="ui stackable pointing inverted menu tabbed">
+        <div class="ui stackable pointing inverted wrapping centered fluid menu tabbed">
             <a href="{{ url_for('preferences') }}?tab=general" class="item{{ tab == 'general' ? ' active' }}" data-tab="general">{{ _T("General") }}</a>
             <a href="{{ url_for('preferences') }}?tab=social" class="item{{ tab == 'social' ? ' active' }}" data-tab="social">{{ _T("Social networks") }}</a>
             <a href="{{ url_for('preferences') }}?tab=parameters" class="item{{ tab == 'parameters' ? ' active' }}" data-tab="parameters">{{ _T("Parameters") }}</a>

diff --git a/ui/semantic/galette/collections/menu.overrides b/ui/semantic/galette/collections/menu.overrides
index e368d4e722956b34c5ada4d9756bc109bbaba92f..bcbbb4e0ee1aa84f764169d539d527a8322b34dd 100644 (file)
--- a/ui/semantic/galette/collections/menu.overrides
+++ b/ui/semantic/galette/collections/menu.overrides
@@ -68,6 +68,18 @@
     color: @hoveredTextColor;
 }
 
+/* -----------------------------------------------
+      Wrapping pointing inverted tabbed menus
+------------------------------------------------ */
+.ui.wrapping.menu.tabbed .item:last-child,
+.ui.wrapping.menu.tabbed .item:last-of-type {
+  border-right-color: transparent !important;
+}
+.ui.wrapping.menu.tabbed .item::before {
+  right: 0;
+  left: auto;
+}
+
 /*------------------
      Pagination
 -------------------*/