From af8b4fa38f89ea5de510ba346fc99fc98916f41a Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 17 May 2026 22:18:52 +0200
Subject: [PATCH] fix(19): status badge and edit/trash on same line

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 backend/templates/tablos.templ | 51 +++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/backend/templates/tablos.templ b/backend/templates/tablos.templ
index 7bdf796..2e6fd4d 100644
--- a/backend/templates/tablos.templ
+++ b/backend/templates/tablos.templ
@@ -146,37 +146,36 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 				}
 				<h3 class="text-base font-semibold text-gray-900 flex-1 line-clamp-2">{ card.Tablo.Title }</h3>
 			</div>
-			<!-- Row 2: DB status badge -->
-			<div>
+			<!-- Row 2: status badge + edit + delete (same line) -->
+			<div class="flex items-center justify-between pt-1 border-t border-gray-100">
 				if card.Tablo.Status == "archived" {
 					<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">Archivé</span>
 				} else {
 					<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-200">Actif</span>
 				}
-			</div>
-			<!-- Row 3: edit + delete actions -->
-			<div class="flex items-center gap-1 pt-1 border-t border-gray-100">
-				<a
-					href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) }
-					class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
-					aria-label="Edit tablo"
-					onclick="event.stopPropagation()"
-				>
-					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-				</a>
-				<div class="tablo-delete-zone">
-					@ui.IconButton(ui.IconButtonProps{
-						Label:   "Delete tablo",
-						Icon:    "trash",
-						Variant: ui.IconButtonVariantDanger,
-						Tone:    ui.IconButtonToneGhost,
-						Type:    "button",
-						Attrs: templ.Attributes{
-							"hx-get":    "/tablos/" + card.Tablo.ID.String() + "/delete-confirm",
-							"hx-target": "closest .tablo-delete-zone",
-							"hx-swap":   "outerHTML",
-						},
-					})
+				<div class="flex items-center gap-1">
+					<a
+						href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) }
+						class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
+						aria-label="Edit tablo"
+						onclick="event.stopPropagation()"
+					>
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+					</a>
+					<div class="tablo-delete-zone">
+						@ui.IconButton(ui.IconButtonProps{
+							Label:   "Delete tablo",
+							Icon:    "trash",
+							Variant: ui.IconButtonVariantDanger,
+							Tone:    ui.IconButtonToneGhost,
+							Type:    "button",
+							Attrs: templ.Attributes{
+								"hx-get":    "/tablos/" + card.Tablo.ID.String() + "/delete-confirm",
+								"hx-target": "closest .tablo-delete-zone",
+								"hx-swap":   "outerHTML",
+							},
+						})
+					</div>
 				</div>
 			</div>
 		</div>