From 5cd1ca3f32b269171c053d1cc043b002b8be38b5 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 21 Apr 2026 00:54:17 +0200
Subject: [PATCH] fix: make entire anime card clickable with proper pointer
 events

---
 web/components/anime_card.templ | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/components/anime_card.templ b/web/components/anime_card.templ
index 0fda4e6..fcff7e0 100644
--- a/web/components/anime_card.templ
+++ b/web/components/anime_card.templ
@@ -40,7 +40,7 @@ templ AnimeCard(props AnimeCardProps) {
 		</div>
 	} else {
 		<div class={ defaultString(props.Class, "group relative min-w-0") }>
-			<a href={ templ.URL(cardHref(props)) } class="absolute inset-0 z-0"></a>
+			<a href={ templ.URL(cardHref(props)) } class="absolute inset-0 z-10"></a>
 			@animeCardPoster(props)
 			if !props.HideTitle {
 				<div class={ defaultString(props.TitleClass, "relative z-10 mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
@@ -61,7 +61,7 @@ func cardHref(props AnimeCardProps) string {
 }
 
 templ animeCardPoster(props AnimeCardProps) {
-	<div class="relative w-full aspect-2/3 overflow-hidden">
+	<div class="pointer-events-none relative w-full aspect-2/3 overflow-hidden">
 		<div class="block h-full w-full">
 			if props.ImageURL != "" {
 				<img src={ props.ImageURL } alt={ props.Title } class={ defaultString(props.ImgClass, "block h-full w-full object-cover object-center") } loading="lazy"/>
@@ -69,17 +69,17 @@ templ animeCardPoster(props AnimeCardProps) {
 				<div class="flex h-full w-full justify-center overflow-hidden text-transparent">No image</div>
 			}
 		</div>
-		<div class="absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
+		<div class="pointer-events-none absolute inset-0 bg-black/0 transition-colors duration-200 group-hover:bg-black/40"></div>
 		if props.Synopsis != "" {
-			<div class="absolute inset-0 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+			<div class="pointer-events-none absolute inset-0 flex flex-col justify-between p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
 				<div>
 					<div class="mb-1 text-[11px] font-semibold text-white/90">{ props.Title }</div>
 					<p class="line-clamp-3 text-[11px] leading-relaxed text-white/90">{ props.Synopsis }</p>
 				</div>
 			</div>
 		}
-		if props.PlayHref != "" || !props.CurrentNode {
-			<div class="absolute bottom-2 left-2 z-10 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+		if props.PlayHref != "" || !props.CurrentNode && !props.DisableWatchlist {
+			<div class="pointer-events-auto absolute bottom-2 left-2 z-20 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
 				if props.PlayHref != "" {
 					<a
 						href={ templ.URL(props.PlayHref) }