From bf509f6b75301cae9e4cdcff5f3816ac8aac4c29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 20 Jun 2026 12:53:41 +0200
Subject: [PATCH] fix(labs): give the OCR per-row confirm a 44px touch target

---
 src/components/labs/ocr-row-editor.tsx | 28 +++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/labs/ocr-row-editor.tsx b/src/components/labs/ocr-row-editor.tsx
index 54563333f..926a02f94 100644
--- a/src/components/labs/ocr-row-editor.tsx
+++ b/src/components/labs/ocr-row-editor.tsx
@@ -46,15 +46,25 @@ export function OcrRowEditor({
   return (
     <div className="space-y-3 rounded-lg border p-3">
       <div className="flex items-start gap-3">
-        <Checkbox
-          id={`${fieldId}-confirm`}
-          checked={row.confirmed}
-          onCheckedChange={(checked) =>
-            onChange({ ...row, confirmed: checked === true })
-          }
-          className="mt-1 min-h-5 min-w-5"
-          aria-label={t("labs.ocr.confirmRow")}
-        />
+        {/* The checkbox is the PRIMARY per-row confirm on a touch-first OCR
+            review screen, so it needs a ≥44px hit area on coarse pointers. The
+            wrapping label supplies the touch target (and forwards the click to
+            the control) without enlarging the 20px glyph or bloating the row on
+            desktop, where the negative margins collapse the padding back. */}
+        <label
+          htmlFor={`${fieldId}-confirm`}
+          className="-m-3 flex min-h-11 min-w-11 cursor-pointer items-start justify-center p-3 sm:m-0 sm:min-h-0 sm:min-w-0 sm:p-0"
+        >
+          <Checkbox
+            id={`${fieldId}-confirm`}
+            checked={row.confirmed}
+            onCheckedChange={(checked) =>
+              onChange({ ...row, confirmed: checked === true })
+            }
+            className="mt-0.5 min-h-5 min-w-5 sm:mt-1"
+            aria-label={t("labs.ocr.confirmRow")}
+          />
+        </label>
         <div className="min-w-0 flex-1 space-y-1">
           <Input
             value={row.analyte}