From 295f9637b3d3979f6c2b01e6ec8f80c8684b6dd4 Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Fri, 15 May 2026 04:54:33 +0000
Subject: [PATCH] fix(merge-project): dropdown unclickable + modal too short to
 show it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two bugs in the project-merge modal:

1. Dropdown options had the same JSON.stringify quote-collision in
   their inline onclick that broke the location Remove button and the
   metadata-backfill typeahead earlier this week:

     onclick="onMergePickTarget('${id}', ${JSON.stringify(m.name)})"

   For 'I-80 Area 1' that renders as onclick="...(\"I-80 Area 1\")" —
   the inner double quotes terminate the onclick attribute early,
   and the browser never binds the click handler.  Operator clicked
   items in the dropdown and nothing happened.

   Fixed via data-target-id / data-target-name attributes and a
   _mergePickFromButton(btn) trampoline.

2. Modal body had `flex-1 overflow-y-auto` with no min-height, so the
   container shrunk tight around the input.  When the typeahead
   dropdown appeared below the input it got clipped by the body's
   overflow and the operator had to scroll inside the modal to see
   the options.

   Fixed by adding min-height: 480px to the modal container + min-h-
   [320px] on the body so there's always room for the dropdown + the
   preview pane that appears below after a target is picked.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../partials/projects/project_header.html     | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/templates/partials/projects/project_header.html b/templates/partials/projects/project_header.html
index 6aeff79..9e49749 100644
--- a/templates/partials/projects/project_header.html
+++ b/templates/partials/projects/project_header.html
@@ -87,9 +87,14 @@
     </div>
 </div>
 
-<!-- Merge Modal -->
+<!-- Merge Modal —
+     min-h on the body ensures the typeahead dropdown has room to render
+     below the input without forcing the operator to scroll inside the
+     modal.  overflow-visible on the body lets the dropdown extend
+     beyond the body's natural height when needed. -->
 <div id="merge-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
+    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col"
+         style="min-height: 480px;">
         <!-- Header -->
         <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div>
@@ -104,7 +109,7 @@
         </div>
 
         <!-- Body -->
-        <div class="px-6 py-4 overflow-y-auto flex-1">
+        <div class="px-6 py-4 overflow-y-auto flex-1 min-h-[320px]">
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Target project
             </label>
@@ -202,6 +207,10 @@ async function _mergeFetchTargets() {
         return;
     }
 
+    // Stash target id + name in data-* attributes (NOT inline JS args)
+    // to avoid the quote-collision that breaks click binding when the
+    // project name contains characters JSON.stringify quotes.  Same
+    // pattern as the backfill typeahead dropdown.
     dropdown.innerHTML = candidates.map(m => {
         const scoreBadge = m.score >= 0.99
             ? '<span class="text-xs text-green-600 dark:text-green-400 ml-2">exact</span>'
@@ -212,8 +221,10 @@ async function _mergeFetchTargets() {
         if (m.location_count > 0) meta.push(`${m.location_count} location${m.location_count === 1 ? '' : 's'}`);
         const metaLine = meta.length ? `<div class="text-xs text-gray-500 dark:text-gray-400">${meta.join(' · ')}</div>` : '';
         return `<button type="button"
+            data-target-id="${_mergeEsc(m.id)}"
+            data-target-name="${_mergeEsc(m.name)}"
             onmousedown="event.preventDefault()"
-            onclick="onMergePickTarget('${_mergeEsc(m.id)}', ${JSON.stringify(m.name)})"
+            onclick="_mergePickFromButton(this)"
             class="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-slate-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
             <div class="text-sm font-medium text-gray-900 dark:text-white">${_mergeEsc(m.name)}${scoreBadge}</div>
             ${metaLine}
@@ -222,6 +233,13 @@ async function _mergeFetchTargets() {
     dropdown.classList.remove('hidden');
 }
 
+// Trampoline — reads the button's data attributes and forwards.  Keeps
+// the inline onclick free of any string interpolation that could break
+// HTML quoting (see notes on the same pattern in metadata_backfill.html).
+function _mergePickFromButton(btn) {
+    onMergePickTarget(btn.dataset.targetId, btn.dataset.targetName);
+}
+
 async function onMergePickTarget(targetId, targetName) {
     document.getElementById('merge-target-input').value = targetName;
     document.getElementById('merge-target-id').value = targetId;