Improve table in list

views/list.html

@@ -1,7 +1,7 @@
 {% extends "layouts/main.html" %}
 
 {% block main %}
-<div class="container mt-4">
+<div class="container my-4">
 	<div class="mb-4">
 		<nav>
 			<ol class="breadcrumb">
@@ -79,64 +79,67 @@
 		</form>
 	</div>
 
-	<div class="mt-4 mb-3">
+	<div class="my-3 row">
-		<span class="h4">
+		<div class="col-sm-9 h4">
 			Contenu de la liste
-		</span>
+		</div>
+		<div class="col-sm-3 text-end">
+			<a class="btn btn-md btn-primary" href="/admin/lists/{{ List.ID }}/items/add">
+				<i class="bi-plus-lg"></i>
+				Ajouter
+			</a>
+		</div>
+	</div>
+
+	{% if ListItems %}
+	<div class="table-responsive">
+		<table class="table">
+			<thead>
+				<tr>
+					<th class="w-50">Valeur</th>
+					<th class="w-25">Par défaut</th>
+					<th class="w-25"></th>
+				</tr>
+			</thead>
+			<tbody>
+				{% for Item in ListItems %}
+				<tr>
+					<td>
+						<a href="/admin/lists/{{ List.ID }}/items/{{ Item.ID }}">
+							{{ Item.Value }}
+						</a>
+					</td>
+					<td>
+						{% if Item.Default %}
+							<i class="bi-check-lg text-success me-1"></i>
+							Oui
+						{% else %}
+							<i class="bi-x-lg text-danger me-1"></i>
+							Non
+						{% endif %}
+					</td>
+					<td class="text-end">
+						<form
+							action="/admin/lists/{{ List.ID }}/items/{{ Item.ID }}/delete"
+							method="post"
+							class="d-inline p-0"
+						>
+							<button class="btn btn-sm btn-danger areyousure" type="submit">
+								<i class="bi-trash3"></i>
+								Supprimer
+							</button>
+						</form>
+					</td>
+				</tr>
+				{% endfor %}
+			</tbody>
+		</table>
 	</div>
-	{% if ListItems %}	
-	<table class="table">
-		<thead>
-			<tr>
-				<th>Valeur</th>
-				<th>Par défaut</th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			{% for Item in ListItems %}
-			<tr>
-				<td>
-					<a href="/admin/lists/{{ List.ID }}/items/{{ Item.ID }}">
-						{{ Item.Value }}
-					</a>
-				</td>
-				<td>
-					{% if Item.Default %}
-						<i class="bi-check-lg text-success me-1"></i>
-						Oui
-					{% else %}
-						<i class="bi-x-lg text-danger me-1"></i>
-						Non
-					{% endif %}
-				</td>
-				<td class="text-end">
-					<form
-						action="/admin/lists/{{ List.ID }}/items/{{ Item.ID }}/delete"
-						method="post"
-						class="d-inline p-0"
-					>
-						<button class="btn btn-sm btn-danger areyousure" type="submit">
-							<i class="bi-trash3"></i>
-							Supprimer
-						</button>
-					</form>
-				</td>
-			</tr>
-			{% endfor %}
-		</tbody>
-	</table>
 	{% else %}
 	<div>
 		Pas encore d'éléments dans cette liste.
 	</div>
 	{% endif %}
 
-	<div class="my-4">
-		<a class="btn btn-md btn-primary" href="/admin/lists/{{ List.ID }}/items/add">
-			<i class="bi-plus-lg"></i>
-			Ajouter
-		</a>
-	</div>
 </div>
 {% endblock %}