Fix large tables overflow when screen is to small

fixes #1748

diff --git a/galette/templates/default/elements/list.html.twig b/galette/templates/default/elements/list.html.twig
index 5cc3357d907d68c4f5dbfdf7ebe9d76807a87cff..536d850382adb2654e74daffaab589a74e67b4d9 100644 (file)
--- a/galette/templates/default/elements/list.html.twig
+++ b/galette/templates/default/elements/list.html.twig
@@ -54,7 +54,7 @@
     {% if list_type is defined and list_type == 'cards' %}
                 <div class="{% if nb %}ui doubling {% if cards_columns is defined %}{{ cards_columns }}{% else %}six{% endif %} column cards loader_selector{% endif %}">
     {% else %}
-                <div class="ui basic fitted segment loader_selector">
+                <div class="ui basic fitted segment loader_selector large-table-wrapper">
                     <table class="listing ui celled{% if basic_table is not defined %} striped{% endif %} table">
                         <thead>
                             <tr>
@@ -94,12 +94,12 @@
                     </table>
     {% endif %}
 
+            </div>
+
             {% if form is defined and mode != 'ajax' and batch_actions is defined and batch_actions|length > 0 %}
                 {{ macros.drawBatchActionsList(batch_actions) }}
             {% endif %}
 
-            </div>
-
             {% if is_paginated %}
             <div class="ui basic center aligned fitted segment">
                 <div class="ui inverted pagination stackable menu">

diff --git a/ui/semantic/galette/collections/table.overrides b/ui/semantic/galette/collections/table.overrides
index 042894a8a1c1a3b4f0f6d6529d8362d874ebdb94..9c28e30dd68720b919b3a18f03419758900f7064 100644 (file)
--- a/ui/semantic/galette/collections/table.overrides
+++ b/ui/semantic/galette/collections/table.overrides
@@ -37,6 +37,12 @@ td.emptylist {
         background: @activeLineBackgroundColor !important;
     }
 }
+@media only screen and (min-width: @tabletBreakpoint) {
+    .large-table-wrapper {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+}
 
 /*-------------------------
      Membership status