Fix wishlist heart invisible on mobile product grids
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user