Fix popups being trapped inside controls container

- Force move popups to document.body if inside another container
- Added detailed console logging to show parent element
- Shows bounding rect position to debug visibility
- Popups were displaying but trapped inside hidden controls div

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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