From 2db5e171b21903eb621e88e5161b5a8af99f2573 Mon Sep 17 00:00:00 2001
From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Tue, 5 Mar 2024 15:43:02 +0100
Subject: [PATCH] Fix preferences tabs display on small screens

fixes #1799
---
 .../templates/default/pages/preferences.html.twig    |  2 +-
 ui/semantic/galette/collections/menu.overrides       | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

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
 -------------------*/
-- 
2.39.2