makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(31-01): add responsive icon buttons to item detail page

Browse Source 
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.
This commit is contained in:
Jean-Luc Makiola
2026-04-12 20:14:28 +02:00
parent 8a01930de1
commit 7effedea3f
1 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/client/routes/items/$itemId.tsx
View File

@@ -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 && (