Fix face selection: move checkbox below thumbnail, remove pointer-events hack

The overlaid checkbox had pointer-events:none so clicks fell through to
the photo link. Replaced with a real <input type=checkbox> rendered
below each face crop. Checkbox change events drive selection state;
clicking anywhere on the card except the photo link also toggles it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 25 insertions, 7 deletions

diff --git a/views/admin/person_detail.erb b/views/admin/person_detail.erb
index fbce8af..10319cf 100644
--- a/views/admin/person_detail.erb
+++ b/views/admin/person_detail.erb
@@ -128,8 +128,8 @@
               <img src="/face/<%= ERB::Util.html_escape(rel) %>?box=<%= ERB::Util.html_escape(box.join(',')) %>"
                    width="100" height="100" loading="lazy">
             </a>
-            <span class="select-checkbox" aria-hidden="true"></span>
           </div>
+          <input type="checkbox" class="face-cb" aria-label="Select face">
         </div>
       <% end %>
     </div>
@@ -170,21 +170,39 @@
     document.getElementById('bulk-form').style.display  = n ? '' : 'none';
   }
 
+  function toggleCard(card, cb, force) {
+    var checked = (force !== undefined) ? force : !cb.checked;
+    cb.checked = checked;
+    var key = card.dataset.entry;
+    if (checked) { selected.add(key);    card.classList.add('selected'); }
+    else         { selected.delete(key); card.classList.remove('selected'); }
+    updatePanel();
+  }
+
   document.querySelectorAll('.selectable-face').forEach(function (card) {
+    var cb = card.querySelector('.face-cb');
+
+    // Checkbox change is the authoritative source of truth
+    cb.addEventListener('change', function () {
+      toggleCard(card, cb, cb.checked);
+    });
+
+    // Clicking anywhere on the card except the image link also toggles
     card.addEventListener('click', function (e) {
-      if (e.target.closest('.face-photo-link') && !e.target.closest('.select-checkbox')) return;
+      if (e.target.closest('.face-photo-link')) return;
+      if (e.target === cb) return; // let the checkbox handle it natively
       e.preventDefault();
-      var key = card.dataset.entry;
-      if (selected.has(key)) { selected.delete(key); card.classList.remove('selected'); }
-      else                    { selected.add(key);    card.classList.add('selected'); }
-      updatePanel();
+      toggleCard(card, cb);
     });
   });
 
   document.getElementById('bulk-clear').addEventListener('click', function (e) {
     e.preventDefault();
     selected.clear();
-    document.querySelectorAll('.selectable-face.selected').forEach(function (c) { c.classList.remove('selected'); });
+    document.querySelectorAll('.selectable-face').forEach(function (c) {
+      c.querySelector('.face-cb').checked = false;
+      c.classList.remove('selected');
+    });
     updatePanel();
   });