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;