From 1b4bbf0a068ffba65ab2fb8d906e4312d5c0f614 Mon Sep 17 00:00:00 2001
From: Steve Dudenhoeffer <steve@stevedudenhoeffer.com>
Date: Wed, 22 Jul 2026 09:51:21 -0400
Subject: [PATCH] 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) <noreply@anthropic.com>
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({
         <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 ? (
diff --git a/web/src/components/ui/cardActions.ts b/web/src/components/ui/cardActions.ts
index 8fd8c73..fb9101d 100644
--- a/web/src/components/ui/cardActions.ts
+++ b/web/src/components/ui/cardActions.ts
@@ -7,9 +7,11 @@
 
 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'
+  '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 cardActionClass =
+  cardActionBase + 'hover:bg-border/50 hover:text-fg focus-visible:ring-accent/40'
 
 export const cardDangerClass =
-  `${cardActionBase} hover:bg-red-500/10 hover:text-red-600 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'