From cb4e63dd8ad73ad997a148149be2d23def538dc7 Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Thu, 1 Jan 2026 08:22:48 -0600
Subject: [PATCH] Fix popups only showing when hamburger menu is open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added explicit z-index layers (map: 1, dialogs: 10000+)
- Force visibility, opacity, and overflow on dialogs
- Added reflow trigger to ensure proper rendering
- Added console logging for debugging
- Ensure body has overflow: visible

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 1fd0b2f..4649db6 100644
--- a/index.html
+++ b/index.html
@@ -37,10 +37,14 @@
         }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            overflow: visible;
+            position: relative;
         }
         #map {
             height: 100vh;
             width: 100%;
+            position: relative;
+            z-index: 1;
         }
         .controls {
             position: absolute;
@@ -2401,6 +2405,12 @@
         ];
 
         function showIconSelector() {
+            const selector = document.getElementById('iconSelector');
+            if (!selector) {
+                console.error('Icon selector element not found!');
+                return;
+            }
+
             const iconGrid = document.getElementById('iconGrid');
             iconGrid.innerHTML = '';
 
@@ -2415,7 +2425,17 @@
                 iconGrid.appendChild(iconDiv);
             });
 
-            document.getElementById('iconSelector').style.display = 'flex';
+            // Force display and ensure it's visible
+            selector.style.display = 'flex';
+            selector.style.visibility = 'visible';
+            selector.style.opacity = '1';
+            selector.style.zIndex = '10000';
+            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);
         }
 
         function selectIcon(iconConfig) {
@@ -2460,10 +2480,25 @@
         }
 
         function showPasswordDialog() {
-            document.getElementById('passwordDialog').style.display = 'flex';
+            const dialog = document.getElementById('passwordDialog');
+            if (!dialog) {
+                console.error('Password dialog not found!');
+                return;
+            }
+
+            dialog.style.display = 'flex';
+            dialog.style.visibility = 'visible';
+            dialog.style.opacity = '1';
+            dialog.style.zIndex = '10001';
+            document.body.style.overflow = 'visible';
+
             document.getElementById('passwordInput').value = '';
             document.getElementById('passwordError').style.display = 'none';
             document.getElementById('passwordInput').focus();
+
+            // Force a reflow
+            dialog.offsetHeight;
+            console.log('Password dialog shown');
         }
 
         function hidePasswordDialog() {