fix: heart button - bigger tap target, stopPropagation, scale animation on tap

2026-02-18 10:50:45 +00:00
parent 4d34e8304d
commit 931e2a3c1d
4 changed files with 5 additions and 5 deletions
--- a/frontend/src/components/recipe/RecipeCard.tsx
+++ b/frontend/src/components/recipe/RecipeCard.tsx
@@ -43,11 +43,11 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
            </span>
          )}
          <button
-            onClick={(e) => { e.preventDefault(); favMutation.mutate() }}
-            className="ml-auto"
+            onClick={(e) => { e.preventDefault(); e.stopPropagation(); favMutation.mutate() }}
+            className="ml-auto p-2 -mr-2 min-w-[44px] min-h-[44px] flex items-center justify-center active:scale-125 transition-transform"
          >
            <Heart
-              size={20}
+              size={22}
              className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-warm-grey'}
            />
          </button>