From b33bdeb9ff64a368d87f779a6cb66fe79f3983a8 Mon Sep 17 00:00:00 2001 From: Steve Dudenhoeffer Date: Wed, 22 Jul 2026 09:46:13 -0400 Subject: [PATCH 1/2] Touch-size the list-card footer actions (#105) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Share/Copy/Edit/Delete (gardens) and Duplicate/Edit/Delete (plants) footer actions were a row of ~28px text links — easy to mis-tap on a phone, the "cramped link row" the issue calls out. Both card types share cardActionClass/cardDangerClass, so one change fixes both: a ~40px-tall tap target (min-h + py-2) that reads as a button, not a link. min-h guarantees the target even for a short label. Verified at 390px on the gardens list; desktop unaffected (just a slightly taller footer). tsc + vitest green. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ --- web/src/components/ui/cardActions.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/web/src/components/ui/cardActions.ts b/web/src/components/ui/cardActions.ts index 241498e..8fd8c73 100644 --- a/web/src/components/ui/cardActions.ts +++ b/web/src/components/ui/cardActions.ts @@ -1,10 +1,15 @@ // Shared footer-action button styling for list cards (garden/plant), so the // verbatim class strings don't drift between them. +// +// Sized for touch: a ~40px-tall tap target (min-h + py-2) rather than the old +// ~28px text-link row, which was easy to mis-tap on a phone (#105). The min-h is +// what guarantees the target even when the label is short. -export const cardActionClass = - 'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' + - 'hover:bg-border/50 hover:text-fg focus-visible:ring-2 focus-visible:ring-accent/40' +const cardActionBase = + 'inline-flex min-h-[2.5rem] items-center rounded-md px-3 py-2 text-sm font-medium ' + + 'text-muted outline-none transition-colors focus-visible:ring-2' + +export const cardActionClass = `${cardActionBase} hover:bg-border/50 hover:text-fg focus-visible:ring-accent/40` export const cardDangerClass = - 'rounded-md px-2.5 py-1 text-sm font-medium text-muted outline-none transition-colors ' + - 'hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-2 focus-visible:ring-red-500/40 dark:hover:text-red-400' + `${cardActionBase} hover:bg-red-500/10 hover:text-red-600 focus-visible:ring-red-500/40 dark:hover:text-red-400` -- 2.54.0 From 1b4bbf0a068ffba65ab2fb8d906e4312d5c0f614 Mon Sep 17 00:00:00 2001 From: Steve Dudenhoeffer Date: Wed, 22 Jul 2026 09:51:21 -0400 Subject: [PATCH 2/2] Address review: drop redundant flex on the plant seed-lot toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Gadfly on #105: cardActionClass now bakes in `inline-flex items-center`, so the PlantCard seed-lot toggle's own `flex items-center` conflicted (two display utilities in one plain-string className). Drop them — keep just `mr-auto gap-1.5`. Also made cardActions.ts use one consistent concatenation style instead of mixing concat + template literals. Co-Authored-By: Claude Opus 4.8 (1M context) Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ --- web/src/components/plants/PlantCard.tsx | 2 +- web/src/components/ui/cardActions.ts | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/components/plants/PlantCard.tsx b/web/src/components/plants/PlantCard.tsx index 2a8d771..9122fbb 100644 --- a/web/src/components/plants/PlantCard.tsx +++ b/web/src/components/plants/PlantCard.tsx @@ -82,7 +82,7 @@ export function PlantCard({