Merge pull request 'Touch-size the list-card footer actions (#105)' (#115) from feat/responsive-polish into main

web/src/components/plants/PlantCard.tsx

@@ -82,7 +82,7 @@ export function PlantCard({
         <button
           type="button"
           onClick={() => setShowLots((v) => !v)}
-          className={`${cardActionClass} mr-auto flex items-center gap-1.5`}
+          className={`${cardActionClass} mr-auto gap-1.5`}
           aria-expanded={showLots}
         >
           {lots.length === 0 ? (

web/src/components/ui/cardActions.ts

@@ -1,10 +1,17 @@
 // 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.
+
+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 =
-  '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'
+  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'