From b745ffd90f1097b79df35b6ca816669c3d694bf3 Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Thu, 1 Jan 2026 08:37:46 -0600
Subject: [PATCH] Fix popups being trapped inside controls container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

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