From 1ea5675e1b58e81ac65384ac0200e3fb4b99ba75 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 5 May 2026 16:55:33 +0200
Subject: [PATCH] fix(frontend): extend checkbox hit target to 44x44

A pseudo-element on the label provides a 44x44 minimum hit area
centered on the visible icon. Visible size and surrounding layout
are unchanged. Addresses misclicks on the task list view checkbox
where ~50% of taps would open the task detail instead of toggling
done.
---
 frontend/src/components/base/BaseCheckbox.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index 625944490..39ad34b28 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -40,6 +40,20 @@ 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 {