Update html/map.ejs

html/map.ejs

@@ -774,37 +774,45 @@
 
     function tickCoords(){ updateCoordsFast(); setTimeout(tickCoords,120) } // fast enough, less CPU
     tickCoords();
-// Add a close (X) button inside the search bar
-const searchBox = document.querySelector(".search");
-if (searchBox) {
-  const closeBtn = document.createElement("button");
-  closeBtn.textContent = "✕";
-  closeBtn.className = "closebtn";
-  closeBtn.title = "Close search";
-  searchBox.appendChild(closeBtn);
+// Create floating X button above the search bar
+const bar = document.querySelector(".bar");
+if (bar) {
+  const closeSearch = document.createElement("button");
+  closeSearch.textContent = "✕";
+  closeSearch.title = "Close search";
+  closeSearch.style.position = "absolute";
+  closeSearch.style.top = "-10px";
+  closeSearch.style.right = "-10px";
+  closeSearch.style.background = "#222";
+  closeSearch.style.color = "#fff";
+  closeSearch.style.border = "1px solid #444";
+  closeSearch.style.borderRadius = "50%";
+  closeSearch.style.width = "28px";
+  closeSearch.style.height = "28px";
+  closeSearch.style.cursor = "pointer";
+  closeSearch.style.zIndex = "999";
 
-  closeBtn.addEventListener("click", () => {
-    const form = document.querySelector("#form");
-    const input = document.querySelector("#q");
-    const sugg = document.querySelector("#suggestions");
+  // attach to search container
+  const searchDiv = document.querySelector(".search");
+  searchDiv.style.position = "relative";
+  searchDiv.appendChild(closeSearch);
 
-    input.value = "";
-    sugg.style.display = "none";
-    form.style.display = "none"; // hides the search bar
+  closeSearch.addEventListener("click", () => {
+  
+    document.querySelector("#suggestions").style.display = "none";
+  });
+
+  // shortcut to re-open with `/`
+  document.addEventListener("keydown", e => {
+    if (e.key === "/") {
+      if (searchDiv.style.display === "none") {
+        searchDiv.style.display = "flex";
+        document.querySelector("#q").focus();
+        e.preventDefault();
+      }
+    }
   });
 }
-
-// Allow reopening search bar with `/` key
-document.addEventListener("keydown", e => {
-  if (e.key === "/") {
-    const form = document.querySelector("#form");
-    if (form && form.style.display === "none") {
-      form.style.display = "block";
-      document.querySelector("#q").focus();
-      e.preventDefault();
-    }
-  }
-});
   })();
   </script>
   <script src="/static/data-mobile.js" defer></script>