diff --git a/index.html b/index.html index 1a69b6f..1525d15 100644 --- a/index.html +++ b/index.html @@ -2421,12 +2421,18 @@ ]; function showIconSelector() { - const selector = document.getElementById('iconSelector'); + let selector = document.getElementById('iconSelector'); if (!selector) { console.error('Icon selector element not found!'); return; } + // CRITICAL: Move popup to body if it's inside another container + if (selector.parentElement !== document.body) { + console.log('Moving icon selector to body from:', selector.parentElement.id || selector.parentElement.className); + document.body.appendChild(selector); + } + const iconGrid = document.getElementById('iconGrid'); iconGrid.innerHTML = ''; @@ -2445,13 +2451,16 @@ selector.style.display = 'flex'; selector.style.visibility = 'visible'; selector.style.opacity = '1'; - selector.style.zIndex = '10000'; + selector.style.zIndex = '999999'; document.body.style.overflow = 'visible'; // Force a reflow to ensure rendering selector.offsetHeight; - console.log('Icon selector shown:', selector.style.display, 'Computed display:', window.getComputedStyle(selector).display); + console.log('Icon selector parent:', selector.parentElement.tagName, + 'Display:', selector.style.display, + 'Computed:', window.getComputedStyle(selector).display, + 'Position:', selector.getBoundingClientRect()); } function selectIcon(iconConfig) { @@ -2496,16 +2505,22 @@ } function showPasswordDialog() { - const dialog = document.getElementById('passwordDialog'); + let dialog = document.getElementById('passwordDialog'); if (!dialog) { console.error('Password dialog not found!'); return; } + // CRITICAL: Move popup to body if it's inside another container + if (dialog.parentElement !== document.body) { + console.log('Moving password dialog to body from:', dialog.parentElement.id || dialog.parentElement.className); + document.body.appendChild(dialog); + } + dialog.style.display = 'flex'; dialog.style.visibility = 'visible'; dialog.style.opacity = '1'; - dialog.style.zIndex = '10001'; + dialog.style.zIndex = '999998'; document.body.style.overflow = 'visible'; document.getElementById('passwordInput').value = ''; @@ -2514,7 +2529,7 @@ // Force a reflow dialog.offsetHeight; - console.log('Password dialog shown'); + console.log('Password dialog shown - parent:', dialog.parentElement.tagName); } function hidePasswordDialog() {