From bf4c7b36bde7bfb203b9e892a1a787dff4f1652c Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Sun, 14 Jun 2026 01:08:12 +0200
Subject: [PATCH] fix(ui): Rendre les tableaux principaux responsives
 (overflow-x-auto)

---
 .../main/resources/templates/adherents/list.html    | 13 +++++--------
 .../src/main/resources/templates/index.html         | 10 +++++-----
 .../main/resources/templates/paiements/list.html    |  7 ++++---
 .../templates/parametrage/categories_list.html      |  6 ++++--
 .../resources/templates/preinscriptions/list.html   |  7 ++++---
 5 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/as-talange-web/src/main/resources/templates/adherents/list.html b/as-talange-web/src/main/resources/templates/adherents/list.html
index d6dfd42..db11fb3 100644
--- a/as-talange-web/src/main/resources/templates/adherents/list.html
+++ b/as-talange-web/src/main/resources/templates/adherents/list.html
@@ -54,7 +54,8 @@
                     </form>
                 </div>
                 
-                <table class="w-full text-left border-collapse">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse min-w-[1000px]">
                     <thead>
                         <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
                             <th class="py-3 px-6 font-medium text-left">Nom</th>
@@ -62,7 +63,6 @@
                             <th class="py-3 px-6 font-medium text-left">Catégorie</th>
                             <th class="py-3 px-6 font-medium text-center">N° Licence</th>
                             <th class="py-3 px-6 font-medium text-left">Email</th>
-                            <th class="py-3 px-6 font-medium text-left">Téléphone</th>
                             <th class="py-3 px-6 font-medium text-center">Paiement</th>
                             <th class="py-3 px-6 font-medium text-right">Actions</th>
                         </tr>
@@ -86,9 +86,6 @@
                             <td class="py-2 px-3">
                                 <input type="text" id="filterEmail" name="email" th:value="${emailFilter}" placeholder="Filtrer Email..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                             </td>
-                            <td class="py-2 px-3">
-                                <input type="text" id="filterTelephone" name="telephone" th:value="${telephoneFilter}" placeholder="Filtrer Tél..." class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
-                            </td>
                             <td class="py-2 px-3">
                                 <select id="filterPaiement" name="paiement" class="w-full border border-gray-300 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500 focus:outline-none">
                                     <option value="">Tous</option>
@@ -102,7 +99,7 @@
                     </thead>
                     <tbody class="divide-y divide-gray-200 text-sm">
                         <tr th:if="${#lists.isEmpty(adherents)}">
-                            <td colspan="8" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
+                            <td colspan="7" class="py-8 text-center text-gray-500">Aucun adhérent enregistré.</td>
                         </tr>
                         <tr th:each="adherent : ${adherents}" class="hover:bg-gray-50 transition-colors adherent-row">
                             <td class="py-4 px-6 font-medium text-gray-900">
@@ -119,7 +116,6 @@
                             <td class="py-4 px-6 text-center text-gray-600 font-mono text-xs" 
                                 th:text="${adherent.getLicenceActuelle() != null and adherent.getLicenceActuelle().numeroLicence != null and !adherent.getLicenceActuelle().numeroLicence.isEmpty() ? adherent.getLicenceActuelle().numeroLicence : '-'}">-</td>
                             <td class="py-4 px-6 text-gray-600" th:text="${adherent.email}">jean@example.com</td>
-                            <td class="py-4 px-6 text-gray-600" th:text="${adherent.telephone}">0600000000</td>
                             <td class="py-3 px-4">
                                 <!-- Aucune licence -->
                                 <div th:if="${adherent.getLicenceActuelle() == null}" class="text-center text-gray-400 text-xs italic">
@@ -158,7 +154,8 @@
                             </td>
                         </tr>
                     </tbody>
-                </table>
+                    </table>
+                </div>
 
                 <!-- Pagination Footer -->
                 <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between bg-gray-50 text-sm text-gray-700">
diff --git a/as-talange-web/src/main/resources/templates/index.html b/as-talange-web/src/main/resources/templates/index.html
index 0e31762..ee5a768 100644
--- a/as-talange-web/src/main/resources/templates/index.html
+++ b/as-talange-web/src/main/resources/templates/index.html
@@ -79,18 +79,18 @@
                     <h3 class="text-lg font-semibold text-gray-900">Derniers adhérents inscrits</h3>
                     <a href="/adherents" class="text-sm font-medium text-blue-600 hover:text-blue-800">Voir tout &rarr;</a>
                 </div>
-                <table class="w-full text-left border-collapse">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse min-w-[600px]">
                     <thead>
                         <tr class="bg-gray-50/50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-100">
                             <th class="py-3 px-6 font-medium">Nom & Prénom</th>
                             <th class="py-3 px-6 font-medium">Date de naissance</th>
-                            <th class="py-3 px-6 font-medium">Téléphone</th>
                             <th class="py-3 px-6 font-medium text-right">Action</th>
                         </tr>
                     </thead>
                     <tbody class="divide-y divide-gray-100 text-sm">
                         <tr th:if="${#lists.isEmpty(derniersInscrits)}">
-                            <td colspan="4" class="py-4 px-6 text-center text-gray-500">Aucun adhérent récent.</td>
+                            <td colspan="3" class="py-4 px-6 text-center text-gray-500">Aucun adhérent récent.</td>
                         </tr>
                         <tr th:each="adh : ${derniersInscrits}" class="hover:bg-gray-50 transition-colors">
                             <td class="py-4 px-6">
@@ -98,13 +98,13 @@
                                 <div class="text-xs text-gray-500" th:text="${adh.email}">jean@example.com</div>
                             </td>
                             <td class="py-4 px-6 text-gray-600" th:text="${#temporals.format(adh.dateNaissance, 'dd/MM/yyyy')}">01/01/2000</td>
-                            <td class="py-4 px-6 text-gray-600" th:text="${adh.telephone}">0600000000</td>
                             <td class="py-4 px-6 text-right">
                                 <a th:href="@{/adherents/{id}/edit(id=${adh.id})}" class="text-blue-600 hover:text-blue-800 font-medium">Voir profil</a>
                             </td>
                         </tr>
                     </tbody>
-                </table>
+                    </table>
+                </div>
             </div>
             
         </div>
diff --git a/as-talange-web/src/main/resources/templates/paiements/list.html b/as-talange-web/src/main/resources/templates/paiements/list.html
index 981b098..4cc9f78 100644
--- a/as-talange-web/src/main/resources/templates/paiements/list.html
+++ b/as-talange-web/src/main/resources/templates/paiements/list.html
@@ -34,8 +34,8 @@
 
                 <form id="filter-form" hx-get="/paiements" hx-target="#paiements-table-container" hx-select="#paiements-table-container" hx-trigger="change, keyup changed delay:300ms" hx-sync="this:replace" hx-on::config-request="if (event.detail.trigger.tagName !== 'BUTTON') { event.detail.parameters['page'] = 0; }" class="m-0">
                     <input type="hidden" name="query" th:value="${searchQuery}">
-                    
-                    <table class="w-full text-left border-collapse">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse min-w-[1000px]">
                         <thead>
                             <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
                                 <th class="py-3 px-6 font-medium text-left">Date</th>
@@ -120,7 +120,8 @@
                                 </td>
                             </tr>
                         </tbody>
-                    </table>
+                        </table>
+                    </div>
                 </form>
 
                 <!-- Pagination Footer -->
diff --git a/as-talange-web/src/main/resources/templates/parametrage/categories_list.html b/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
index 83b2492..146b3c9 100644
--- a/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
+++ b/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
@@ -25,7 +25,8 @@
             </div>
 
             <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-                <table class="w-full text-left border-collapse">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse min-w-[800px]">
                     <thead>
                         <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
                             <th class="py-3 px-6 font-medium text-left">Nom de la catégorie</th>
@@ -54,7 +55,8 @@
                             </td>
                         </tr>
                     </tbody>
-                </table>
+                    </table>
+                </div>
             </div>
         </div>
     </main>
diff --git a/as-talange-web/src/main/resources/templates/preinscriptions/list.html b/as-talange-web/src/main/resources/templates/preinscriptions/list.html
index a3fea43..e0d4bb6 100644
--- a/as-talange-web/src/main/resources/templates/preinscriptions/list.html
+++ b/as-talange-web/src/main/resources/templates/preinscriptions/list.html
@@ -21,7 +21,8 @@
 
         <div class="flex-1 overflow-auto p-6">
             <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-                <table class="w-full text-left border-collapse">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse min-w-[800px]">
                     <thead>
                         <tr class="bg-gray-50 text-gray-500 text-sm uppercase tracking-wider border-b border-gray-200">
                             <th class="py-3 px-6 font-medium">Date</th>
@@ -42,7 +43,6 @@
                                 <div th:if="${pre.representantLegal != null}" class="text-[10px] text-blue-600 font-semibold mt-1" th:text="'Parent : ' + ${pre.representantLegal}"></div>
                             </td>
                             <td class="py-4 px-6">
-                                <div class="text-gray-900" th:text="${pre.telephone}"></div>
                                 <div class="text-xs text-gray-500" th:text="${pre.email}"></div>
                             </td>
                             <td class="py-4 px-6 text-right space-x-2">
@@ -59,7 +59,8 @@
                             </td>
                         </tr>
                     </tbody>
-                </table>
+                    </table>
+                </div>
             </div>
         </div>
     </main>