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 71fe76a23b9261118067b2bd873491aac8a662a2..630c68e9e48d2fd9302c2aa8f235965f5680bad9 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -22,7 +22,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 17092632a4cc77b59debd3c96ae06c45f465b7dc..65fe446f3ca6dc19e4a44f6a515490258217593e 100644 (file)
--- a/ui/semantic/galette/collections/menu.overrides
+++ b/ui/semantic/galette/collections/menu.overrides
@@ -83,6 +83,18 @@
   }
 }
 
+/* -----------------------------------------------
+      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
 -------------------*/