Tidy: store never writes an undefined ghost; plant card toggle is the face, not the card

Co-Authored-By: Claude Fable 5 <[email protected]>

web/src/components/plants/PlantCard.tsx

@@ -49,36 +49,30 @@ export function PlantCard({
 
   return (
     <div
-      role="button"
-      tabIndex={0}
-      aria-expanded={open}
-      onClick={() => setOpen((v) => !v)}
-      onKeyDown={(e) => {
-        if (e.target === e.currentTarget && (e.key === 'Enter' || e.key === ' ')) {
-          e.preventDefault()
-          setOpen((v) => !v)
-        }
-      }}
-      className={cn(
-        'panel relative cursor-pointer px-[18px] py-4 transition-shadow hover:[box-shadow:var(--shadow-md)]',
-        open && 'border-accent-400',
-      )}
+      className={cn('panel relative transition-shadow hover:[box-shadow:var(--shadow-md)]', open && 'border-accent-400')}
     >
-      <div className="flex items-center gap-3">
-        <Monogram color={plant.color} letters={letters} />
-        <span className="flex min-w-0 flex-col gap-px">
-          <span className="truncate font-heading text-[16.5px]" title={plant.name}>
-            {plant.name}
+      {/* The whole face is the toggle; the expanded area below has its own controls. */}
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="block w-full cursor-pointer rounded-[inherit] px-[18px] py-4 text-left"
+      >
+        <div className="flex items-center gap-3">
+          <Monogram color={plant.color} letters={letters} />
+          <span className="flex min-w-0 flex-col gap-px">
+            <span className="truncate font-heading text-[16.5px]" title={plant.name}>
+              {plant.name}
+            </span>
+            <span className="text-xs font-semibold text-ink-mute">{sub.join(' · ')}</span>
           </span>
-          <span className="text-xs font-semibold text-ink-mute">{sub.join(' · ')}</span>
-        </span>
-        {builtin && <Tag tone="neutral" className="ml-auto flex-none">built-in</Tag>}
-      </div>
-      <div className="mt-2.5 text-[12.5px] text-ink-soft">{lotText}</div>
+          {builtin && <Tag tone="neutral" className="ml-auto flex-none">built-in</Tag>}
+        </div>
+        <div className="mt-2.5 text-[12.5px] text-ink-soft">{lotText}</div>
+      </button>
 
       {open && (
-        // Stop clicks inside the expanded area from toggling the card.
-        <div className="mt-2.5 flex flex-col gap-2" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+        <div className="-mt-1.5 flex flex-col gap-2 px-[18px] pb-4">
           {lots.map((lot) => (
             <LotCard key={lot.id} lot={lot} onEdit={() => onEditLot(lot)} onDelete={() => onDeleteLot(lot)} />
           ))}