From bd0b284201fddce5742251e40118f8941365b4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 1 Jun 2026 21:13:39 +0200
Subject: [PATCH] fix(a11y): enlarge mood tag chips to the 44px tap target

The structured-tag picker chips and the side-effect chips sat at 32px
(min-h-8), under the 44px minimum and a fat-finger risk on a phone where
they wrap tightly. Bump both to min-h-11 with matched padding so the tap
target clears 44px without loosening the visual density.
---
 src/components/mood/mood-form.tsx       | 2 +-
 src/components/mood/mood-tag-picker.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mood/mood-form.tsx b/src/components/mood/mood-form.tsx
index a42ce14e1..38ac2d570 100644
--- a/src/components/mood/mood-form.tsx
+++ b/src/components/mood/mood-form.tsx
@@ -313,7 +313,7 @@ export function MoodForm({ onSuccess, onCancel, footerSlot }: MoodFormProps) {
                       setTagsInput(next);
                     }
                   }}
-                  className={`min-h-8 rounded-full border px-2.5 py-1 text-xs transition-colors ${
+                  className={`inline-flex min-h-11 items-center rounded-full border px-3 py-2 text-xs transition-colors ${
                     isActive
                       ? "border-primary bg-primary/15 text-primary"
                       : "border-border/70 bg-muted text-foreground/75 hover:bg-accent hover:text-foreground"
diff --git a/src/components/mood/mood-tag-picker.tsx b/src/components/mood/mood-tag-picker.tsx
index 76dbae0ec..25139e103 100644
--- a/src/components/mood/mood-tag-picker.tsx
+++ b/src/components/mood/mood-tag-picker.tsx
@@ -92,7 +92,7 @@ export function MoodTagPicker({
                     type="button"
                     onClick={() => onToggle(tag.key)}
                     aria-pressed={isActive}
-                    className={`inline-flex min-h-8 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs transition-colors ${
+                    className={`inline-flex min-h-11 items-center gap-1.5 rounded-full border px-3 py-2 text-xs transition-colors ${
                       isActive
                         ? "border-primary bg-primary/15 text-primary"
                         : "border-border/70 bg-muted text-foreground/75 hover:bg-accent hover:text-foreground"