From 90d43f98bcf548f72218678df7f1bcb9ee616b7a Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 17 May 2026 22:21:49 +0200
Subject: [PATCH] fix(19): move edit+trash to same line as status pill

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

diff --git a/backend/templates/tablos.templ b/backend/templates/tablos.templ
index c263cf6..1c6450e 100644
--- a/backend/templates/tablos.templ
+++ b/backend/templates/tablos.templ
@@ -125,8 +125,8 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 	>
 		<!-- Card view (default: visible in grid layout) -->
 		<div class="bg-white rounded-xl p-5 border border-[#EAECF0] hover:shadow-md transition-shadow cursor-pointer project-card flex flex-col gap-3">
-			<!-- Row 1: icon + title + status pill -->
-			<div class="flex items-center gap-3">
+			<!-- Row 1: icon + title + status pill + edit + delete -->
+			<div class="flex items-center gap-2">
 				if card.Tablo.Color.Valid && card.Tablo.Color.String != "" {
 					<div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style={ "background-color: " + card.Tablo.Color.String }>
 						<span class="text-white font-bold text-sm">
@@ -144,12 +144,34 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 						</span>
 					</div>
 				}
-				<h3 class="text-sm font-semibold text-gray-900 flex-1 line-clamp-1">{ card.Tablo.Title }</h3>
+				<h3 class="text-sm font-semibold text-gray-900 flex-1 line-clamp-1 min-w-0">{ card.Tablo.Title }</h3>
 				if card.Tablo.Status == "archived" {
 					<span class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">Archivé</span>
 				} else {
 					<span class="shrink-0 px-2 py-0.5 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-200">Actif</span>
 				}
+				<a
+					href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) }
+					class="shrink-0 inline-flex items-center justify-center w-7 h-7 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-3.5 h-3.5" 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 shrink-0">
+					@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>
 			<!-- Row 2: creation date -->
 			<div class="flex items-center gap-1.5 text-xs text-gray-500">
@@ -166,31 +188,6 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
 					<div class="bg-purple-500 h-1.5 rounded-full project-card-progress-bar" style={ "width: " + strconv.Itoa(card.Progress) + "%" }></div>
 				</div>
 			</div>
-			<!-- Row 4: edit + delete -->
-			<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-7 h-7 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-3.5 h-3.5" 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>
 		<!-- List row (hidden by default, shown when data-view="list") -->
 		<div class="tablo-list-row" onclick="event.stopPropagation()">