From 9bf6e3f4f2f07db3c842eb6ae9f361a970b7e1fd Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 31 Jul 2026 20:43:40 +0000 Subject: [PATCH] Fix wishlist heart invisible on mobile product grids MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit revealOnHover relied purely on group-hover/group-focus-within, both mouse/keyboard-only pseudo-classes with no reliable touch equivalent — a tap on a card never reliably triggers group-hover the way a mouse hover does, leaving the heart permanently hidden on touch devices. Adds pointer-coarse:opacity-100 so it's always visible there; desktop hover-reveal behavior is unchanged. Co-Authored-By: Claude Sonnet 5 --- app/components/WishlistButton.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/components/WishlistButton.tsx b/app/components/WishlistButton.tsx index 66eca0d..0675609 100644 --- a/app/components/WishlistButton.tsx +++ b/app/components/WishlistButton.tsx @@ -25,12 +25,11 @@ export function WishlistButton({ * card is hovered/focused, unless the product is already wishlisted (a * filled heart stays as a permanent status indicator) — right for a * multi-card grid (ProductGrid.tsx), where a heart on every single card - * reads as visual noise (Marco: "sieht man überall Herzen", 2026-07-31). - * Relies on the parent card already carrying `group`/`focus-within` - * (see ProductGrid.tsx) — Tailwind's plain `:hover`, so tapping a card - * on touch devices reveals it the same way the existing - * `group-hover:-translate-y-1` card-lift already does, no separate - * touch handling needed. */ + * reads as visual noise. Relies on the parent card already carrying + * `group`/`focus-within` (see ProductGrid.tsx). Always visible on + * coarse-pointer (touch) devices regardless of hover/focus state — + * touch has no persistent `:hover`, so a tap on the card never reliably + * reveals a `group-hover`-gated element the way a mouse hover does. */ revealOnHover?: boolean; }) { const { isWishlisted, toggle } = useWishlist(); @@ -63,7 +62,7 @@ export function WishlistButton({ disabled={pending} className={`flex h-9 w-9 items-center justify-center rounded-full bg-bg-base/90 backdrop-blur-sm transition-all active:scale-90 disabled:opacity-60 ${ revealOnHover && !wishlisted - ? "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100" + ? "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 pointer-coarse:opacity-100" : "" } ${className}`} >