From 83cd8e2da00f09bb42bd2c6608cc2d656397352f Mon Sep 17 00:00:00 2001
From: "isaprettycoolguy@protonmail.com"
 <6576516+nyxsys@users.noreply.github.com>
Date: Sat, 23 May 2026 12:42:04 -0400
Subject: [PATCH] fix combo dropdown scroll: suppress modal-content overflow
 while open

position:fixed failed because Obsidian's modal CSS animation sets transform on
.modal, making fixed children position relative to it (not the viewport).
Instead, toggle .duckmage-combo-open on .modal-content (overflow-y:visible)
while the dropdown is open so the absolute-positioned dropdown doesn't trigger
the scroll container.

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

diff --git a/src/hex-map/HexEditorModal.ts b/src/hex-map/HexEditorModal.ts
index 8744012..b8ae062 100644
--- a/src/hex-map/HexEditorModal.ts
+++ b/src/hex-map/HexEditorModal.ts
@@ -694,21 +694,19 @@ export class HexEditorModal extends HexmakerModal {
       }
     };
 
+    const scrollPane = comboWrap.closest<HTMLElement>(".modal-content");
+
     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`,
-      });
+      scrollPane?.addClass("duckmage-combo-open");
       dropdown.show();
     };
 
     const closeDropdown = () => {
       isOpen = false;
       dropdown.hide();
+      scrollPane?.removeClass("duckmage-combo-open");
     };
 
     const selectFile = async (file: TFile) => {
diff --git a/src/hex-map/MapLinkModal.ts b/src/hex-map/MapLinkModal.ts
index 7bf50bb..933f7e0 100644
--- a/src/hex-map/MapLinkModal.ts
+++ b/src/hex-map/MapLinkModal.ts
@@ -85,21 +85,19 @@ export class MapLinkModal extends HexmakerModal {
       }
     };
 
+    const scrollPane = comboWrap.closest<HTMLElement>(".modal-content");
+
     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`,
-      });
+      scrollPane?.addClass("duckmage-combo-open");
       dropdown.show();
     };
 
     const closeDropdown = () => {
       isOpen = false;
       dropdown.hide();
+      scrollPane?.removeClass("duckmage-combo-open");
     };
 
     mapInput.addEventListener("focus", () => openDropdown(""));
diff --git a/src/hex-map/SubmapPickerModal.ts b/src/hex-map/SubmapPickerModal.ts
index 4ead2bf..aa51e1f 100644
--- a/src/hex-map/SubmapPickerModal.ts
+++ b/src/hex-map/SubmapPickerModal.ts
@@ -87,21 +87,19 @@ export class SubmapPickerModal extends HexmakerModal {
       }
     };
 
+    const scrollPane = comboWrap.closest<HTMLElement>(".modal-content");
+
     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`,
-      });
+      scrollPane?.addClass("duckmage-combo-open");
       dropdown.show();
     };
 
     const closeDropdown = () => {
       isOpen = false;
       dropdown.hide();
+      scrollPane?.removeClass("duckmage-combo-open");
     };
 
     mapInput.addEventListener("focus", () => openDropdown(""));
diff --git a/styles.css b/styles.css
index 518d69b..873918c 100644
--- a/styles.css
+++ b/styles.css
@@ -444,6 +444,9 @@ div.duckmage-hex-icon {
     display: flex;
     flex-direction: column;
 }
+.duckmage-editor-modal-drag .modal-content.duckmage-combo-open {
+    overflow-y: visible;
+}
 .duckmage-editor-title-drag {
     cursor: move;
     user-select: none;
@@ -847,8 +850,11 @@ input.duckmage-input-error {
 }
 
 .duckmage-link-combo-dropdown {
-    position: fixed;
-    z-index: 300;
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    z-index: 100;
     background: var(--background-primary);
     border: 1px solid var(--background-modifier-border);
     border-radius: 4px;