From 171a64005d68fe113bbec62f7823790f97515701 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 17 Mar 2026 14:21:11 -0700
Subject: [PATCH] Fix discovery fix modal layout shift causing accidental
 clicks (#186)

Pin source info and search inputs at top of modal with independent
results scrolling, increase auto-search delay to 500ms, and add
confirmation dialog before committing a track match.
---
 webui/static/script.js | 16 ++++++++++++----
 webui/static/style.css | 18 ++++++++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 452b34ef..df16ec9c 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -15231,8 +15231,8 @@ function openDiscoveryFixModal(platform, identifier, trackIndex) {
     fixModalOverlay.classList.remove('hidden');
     console.log('✅ Fix modal opened, starting auto-search...');
 
-    // Auto-search with initial values (after a tiny delay to ensure modal is rendered)
-    setTimeout(() => searchDiscoveryFix(), 100);
+    // Auto-search with initial values (delay allows modal layout to settle and prevents accidental clicks)
+    setTimeout(() => searchDiscoveryFix(), 500);
 }
 
 /**
@@ -15353,6 +15353,10 @@ function renderDiscoveryFixResults(tracks, fixModalOverlay) {
 async function selectDiscoveryFixTrack(track) {
     console.log('✅ User selected track:', track);
 
+    // Confirm selection to prevent accidental clicks from layout shift
+    const artists = (track.artists || ['Unknown Artist']).join(', ');
+    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
+
     const { platform, identifier, trackIndex } = currentDiscoveryFix;
 
     console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track });
@@ -54851,8 +54855,8 @@ function openPoolFixModal(trackId, trackName, artistName) {
     trackInput.addEventListener('keypress', enterHandler);
     artistInput.addEventListener('keypress', enterHandler);
 
-    // Auto-search
-    setTimeout(() => searchPoolFix(), 100);
+    // Auto-search (delay allows modal layout to settle and prevents accidental clicks)
+    setTimeout(() => searchPoolFix(), 500);
 }
 
 function closePoolFixModal() {
@@ -54908,6 +54912,10 @@ async function selectPoolFixTrack(track) {
     if (!fixOverlay) return;
     const trackId = parseInt(fixOverlay.dataset.trackId);
 
+    // Confirm selection to prevent accidental clicks from layout shift
+    const artists = (track.artists || []).join(', ');
+    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
+
     try {
         const res = await fetch('/api/discovery-pool/fix', {
             method: 'POST',
diff --git a/webui/static/style.css b/webui/static/style.css
index f0119d0b..07f30bb1 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -23300,8 +23300,19 @@ body {
 
 .discovery-fix-modal-content {
     padding: 24px;
-    overflow-y: auto;
+    overflow: hidden;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.discovery-fix-modal-content .search-results-section {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .source-track-info {
@@ -23310,6 +23321,7 @@ body {
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 24px;
+    flex-shrink: 0;
 }
 
 .source-track-info h3 {
@@ -23348,6 +23360,7 @@ body {
 
 .search-inputs-section {
     margin-bottom: 24px;
+    flex-shrink: 0;
 }
 
 .search-inputs-section h3 {
@@ -23424,7 +23437,8 @@ body {
     display: flex;
     flex-direction: column;
     gap: 8px;
-    max-height: 400px;
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
 }