From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Tue, 5 Mar 2024 14:43:02 +0000 (+0100)
Subject: Fix preferences tabs display on small screens
X-Git-Url: https://git.agnieray.net/?p=galette.git;a=commitdiff_plain;h=2db5e171b21903eb621e88e5161b5a8af99f2573

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 8459ffb88..5473a221e 100644
--- 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 e368d4e72..bcbbb4e0e 100644
--- 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
 -------------------*/