mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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.
This commit is contained in:
1 parent
baa1ff250c
commit
bd0b284201
2 files changed
+2
-2
No files matched your search
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in new issue
Block a user