fix(ui): Rendre les tableaux principaux responsives (overflow-x-auto)
AS Talange CI/CD Pipeline / Build & Run Unit Tests (push) Successful in 8m8s
AS Talange CI/CD Pipeline / Build & Run in Docker Container (push) Successful in 6m31s

This commit is contained in:
2026-06-14 01:08:12 +02:00
parent 3ed9d0454b
commit bf4c7b36bd
5 changed files with 22 additions and 21 deletions
@@ -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">