serversdown/terra-view
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

fix(merge-project): dropdown unclickable + modal too short to show it

Browse Source 
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>
This commit is contained in:
serversdown
2026-05-15 04:54:33 +00:00
parent ad55d4ca09
commit 295f9637b3
1 changed files with 22 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/projects/project_header.html
+22 -4
View File
@@ -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;