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() {