danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Fix discovery fix modal layout shift causing accidental clicks (#186)

Browse source 
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.
This commit is contained in:
Broque Thomas 2026-03-17 14:21:11 -07:00
parent d31bba8999
commit 171a64005d
2 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
webui/static/script.js
View file

@ -15231,8 +15231,8 @@ function openDiscoveryFixModal(platform, identifier, trackIndex) {
fixModalOverlay.classList.remove('hidden'); fixModalOverlay.classList.remove('hidden');
console.log('✅ Fix modal opened, starting auto-search...'); console.log('✅ Fix modal opened, starting auto-search...');
// Auto-search with initial values (after a tiny delay to ensure modal is rendered) // Auto-search with initial values (delay allows modal layout to settle and prevents accidental clicks)
setTimeout(() => searchDiscoveryFix(), 100); setTimeout(() => searchDiscoveryFix(), 500);
} }
/** /**
@ -15353,6 +15353,10 @@ function renderDiscoveryFixResults(tracks, fixModalOverlay) {
async function selectDiscoveryFixTrack(track) { async function selectDiscoveryFixTrack(track) {
console.log('✅ User selected track:', 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; const { platform, identifier, trackIndex } = currentDiscoveryFix;
console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track }); console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track });
@ -54851,8 +54855,8 @@ function openPoolFixModal(trackId, trackName, artistName) {
trackInput.addEventListener('keypress', enterHandler); trackInput.addEventListener('keypress', enterHandler);
artistInput.addEventListener('keypress', enterHandler); artistInput.addEventListener('keypress', enterHandler);
// Auto-search // Auto-search (delay allows modal layout to settle and prevents accidental clicks)
setTimeout(() => searchPoolFix(), 100); setTimeout(() => searchPoolFix(), 500);
} }
function closePoolFixModal() { function closePoolFixModal() {
@ -54908,6 +54912,10 @@ async function selectPoolFixTrack(track) {
if (!fixOverlay) return; if (!fixOverlay) return;
const trackId = parseInt(fixOverlay.dataset.trackId); 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 { try {
const res = await fetch('/api/discovery-pool/fix', { const res = await fetch('/api/discovery-pool/fix', {
method: 'POST', method: 'POST',

18
webui/static/style.css
View file

@ -23300,8 +23300,19 @@ body {
.discovery-fix-modal-content { .discovery-fix-modal-content {
padding: 24px; padding: 24px;
overflow-y: auto; overflow: hidden;
flex: 1; 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 { .source-track-info {
@ -23310,6 +23321,7 @@ body {
border-radius: 12px; border-radius: 12px;
padding: 16px; padding: 16px;
margin-bottom: 24px; margin-bottom: 24px;
flex-shrink: 0;
} }
.source-track-info h3 { .source-track-info h3 {
@ -23348,6 +23360,7 @@ body {
.search-inputs-section { .search-inputs-section {
margin-bottom: 24px; margin-bottom: 24px;
flex-shrink: 0;
} }
.search-inputs-section h3 { .search-inputs-section h3 {
@ -23424,7 +23437,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
max-height: 400px; flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
} }