From ff8479c59cc3bb971f527da7ceed711aaab42bc9 Mon Sep 17 00:00:00 2001
From: "isaprettycoolguy@protonmail.com"
 <6576516+nyxsys@users.noreply.github.com>
Date: Sat, 23 May 2026 12:35:34 -0400
Subject: [PATCH] fix combo dropdown: position:fixed escapes modal scroll,
 blank inputs in map modals

- Combo dropdown now uses position:fixed with JS-calculated viewport coords so it
  never causes the modal's overflow-y:auto container to scroll
- MapLinkModal: map filter and link text both start blank; link text auto-fills
  on map selection only if still empty
- SubmapPickerModal: focus opens all maps (blank query)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/hex-map/HexEditorModal.ts    |  6 ++++++
 src/hex-map/MapLinkModal.ts      | 16 ++++++++++------
 src/hex-map/SubmapPickerModal.ts |  6 ++++++
 styles.css                       |  7 ++-----
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/hex-map/HexEditorModal.ts b/src/hex-map/HexEditorModal.ts
index ca3c8a1..8744012 100644
--- a/src/hex-map/HexEditorModal.ts
+++ b/src/hex-map/HexEditorModal.ts
@@ -697,6 +697,12 @@ export class HexEditorModal extends HexmakerModal {
     const openDropdown = () => {
       isOpen = true;
       populateDropdown(input.value);
+      const rect = comboWrap.getBoundingClientRect();
+      dropdown.setCssProps({
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+      });
       dropdown.show();
     };
 
diff --git a/src/hex-map/MapLinkModal.ts b/src/hex-map/MapLinkModal.ts
index 3a8b50a..7bf50bb 100644
--- a/src/hex-map/MapLinkModal.ts
+++ b/src/hex-map/MapLinkModal.ts
@@ -31,7 +31,6 @@ export class MapLinkModal extends HexmakerModal {
     }
 
     let selectedMap = maps[0].name;
-    let linkTextDirty = false;
     let linkTextInput!: HTMLInputElement;
 
     // ── Map combo ─────────────────────────────────────────────────────────
@@ -48,7 +47,7 @@ export class MapLinkModal extends HexmakerModal {
       cls: "duckmage-link-combo-input",
       attr: { placeholder: "Filter maps…" },
     });
-    mapInput.value = selectedMap;
+    mapInput.value = "";
 
     comboWrap.createEl("button", {
       text: "▾",
@@ -80,7 +79,7 @@ export class MapLinkModal extends HexmakerModal {
           e.preventDefault();
           selectedMap = m.name;
           mapInput.value = m.name;
-          if (!linkTextDirty) linkTextInput.value = m.name;
+          if (!linkTextInput.value.trim()) linkTextInput.value = m.name;
           closeDropdown();
         });
       }
@@ -89,6 +88,12 @@ export class MapLinkModal extends HexmakerModal {
     const openDropdown = (query: string) => {
       isOpen = true;
       populateDropdown(query);
+      const rect = comboWrap.getBoundingClientRect();
+      dropdown.setCssProps({
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+      });
       dropdown.show();
     };
 
@@ -97,7 +102,7 @@ export class MapLinkModal extends HexmakerModal {
       dropdown.hide();
     };
 
-    mapInput.addEventListener("focus", () => openDropdown(mapInput.value));
+    mapInput.addEventListener("focus", () => openDropdown(""));
     mapInput.addEventListener("blur", () => setTimeout(() => closeDropdown(), 150));
     mapInput.addEventListener("input", () => {
       if (!isOpen) openDropdown(mapInput.value);
@@ -112,8 +117,7 @@ export class MapLinkModal extends HexmakerModal {
       .setName("Link text")
       .addText((t) => {
         linkTextInput = t.inputEl;
-        t.setValue(selectedMap)
-          .onChange(() => { linkTextDirty = true; });
+        t.setValue("");
       });
 
     // ── Buttons ───────────────────────────────────────────────────────────
diff --git a/src/hex-map/SubmapPickerModal.ts b/src/hex-map/SubmapPickerModal.ts
index 07cb7db..4ead2bf 100644
--- a/src/hex-map/SubmapPickerModal.ts
+++ b/src/hex-map/SubmapPickerModal.ts
@@ -90,6 +90,12 @@ export class SubmapPickerModal extends HexmakerModal {
     const openDropdown = (query: string) => {
       isOpen = true;
       populateDropdown(query);
+      const rect = comboWrap.getBoundingClientRect();
+      dropdown.setCssProps({
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+      });
       dropdown.show();
     };
 
diff --git a/styles.css b/styles.css
index 31b47e2..518d69b 100644
--- a/styles.css
+++ b/styles.css
@@ -847,11 +847,8 @@ input.duckmage-input-error {
 }
 
 .duckmage-link-combo-dropdown {
-    position: absolute;
-    top: calc(100% + 2px);
-    left: 0;
-    right: 0;
-    z-index: 100;
+    position: fixed;
+    z-index: 300;
     background: var(--background-primary);
     border: 1px solid var(--background-modifier-border);
     border-radius: 4px;