From 7effedea3f7dc4bacfaa2139df9a5686967667f8 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 20:14:28 +0200
Subject: [PATCH] feat(31-01): add responsive icon buttons to item detail page

Replace text action buttons (Duplicate, Delete, Edit) with icon-only
buttons on mobile viewports (below md: breakpoint). Desktop retains
full text buttons. All icon buttons have aria-label and 44px touch targets.
---
 src/client/routes/items/$itemId.tsx | 44 +++++++++++++++++++++++++++--
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/client/routes/items/$itemId.tsx b/src/client/routes/items/$itemId.tsx
index ba62342..37e39db 100644
--- a/src/client/routes/items/$itemId.tsx
+++ b/src/client/routes/items/$itemId.tsx
@@ -188,28 +188,66 @@ function ItemDetail() {
 				</Link>
 				{!isEditing && (
 					<div className="flex items-center gap-2">
+						{/* Duplicate — desktop */}
 						<button
 							type="button"
 							onClick={handleDuplicate}
 							disabled={duplicateItem.isPending}
-							className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
+							className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
 						>
 							Duplicate
 						</button>
+						{/* Duplicate — mobile */}
+						<button
+							type="button"
+							onClick={handleDuplicate}
+							disabled={duplicateItem.isPending}
+							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
+							aria-label="Duplicate"
+							title="Duplicate"
+						>
+							<LucideIcon name="copy" size={16} />
+						</button>
+						{/* Delete — desktop */}
 						<button
 							type="button"
 							onClick={handleDelete}
-							className="px-3 py-1.5 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+							className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
 						>
 							{isReference ? "Remove from Collection" : "Delete"}
 						</button>
+						{/* Delete — mobile */}
+						<button
+							type="button"
+							onClick={handleDelete}
+							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+							aria-label={
+								isReference ? "Remove from Collection" : "Delete"
+							}
+							title={
+								isReference ? "Remove from Collection" : "Delete"
+							}
+						>
+							<LucideIcon name="trash-2" size={16} />
+						</button>
+						{/* Edit — desktop */}
 						<button
 							type="button"
 							onClick={enterEditMode}
-							className="px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
+							className="hidden md:inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
 						>
 							Edit
 						</button>
+						{/* Edit — mobile */}
+						<button
+							type="button"
+							onClick={enterEditMode}
+							className="md:hidden inline-flex items-center justify-center min-w-[44px] min-h-[44px] p-2 text-white bg-gray-700 hover:bg-gray-800 rounded-lg transition-colors"
+							aria-label="Edit"
+							title="Edit"
+						>
+							<LucideIcon name="pencil" size={16} />
+						</button>
 					</div>
 				)}
 				{isEditing && (