From 3d594db725bbc2708b0c08c6ecf81c8b783d4950 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 5 May 2026 17:21:50 +0200
Subject: [PATCH] fix(frontend): scope checkbox hit-area pseudo to the task row

The pseudo-element that extends the checkbox hit target also covered
label text content, which broke Playwright actionability checks for
clicks on text inside wider FancyCheckbox labels (e.g. the "Show
Archived" toggle on the projects list page).

Move the rule out of BaseCheckbox and into SingleTaskInProject's deep
override, where the label slot is already hidden via display: none, so
no neighboring content can be intercepted.
---
 frontend/src/components/base/BaseCheckbox.vue   | 14 --------------
 .../tasks/partials/SingleTaskInProject.vue      | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index 39ad34b28..625944490 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -40,20 +40,6 @@ const emit = defineEmits<{
 	user-select: none;
 	-webkit-tap-highlight-color: transparent;
 	display: inline-flex;
-	position: relative;
-}
-
-// Extend the hit target to >=44x44 without affecting layout (WCAG 2.5.5).
-.base-checkbox__label::before {
-	content: '';
-	position: absolute;
-	inset-block-start: 50%;
-	inset-inline-start: 50%;
-	min-block-size: 44px;
-	min-inline-size: 44px;
-	block-size: 100%;
-	inline-size: 100%;
-	transform: translate(-50%, -50%);
 }
 
 .base-checkbox:has(input:disabled) .base-checkbox__label {
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 50842df29..57a115b85 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -536,6 +536,23 @@ defineExpose({
 		span {
 			display: none;
 		}
+
+		// Extend the hit target to >=44x44 without affecting layout (WCAG 2.5.5).
+		.base-checkbox__label {
+			position: relative;
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset-block-start: 50%;
+				inset-inline-start: 50%;
+				min-block-size: 44px;
+				min-inline-size: 44px;
+				block-size: 100%;
+				inline-size: 100%;
+				transform: translate(-50%, -50%);
+			}
+		}
 	}
 
 	.tasktext.done {