obsidian-plugin/sbuffkin_hexmaker
1
0
Fork 0
mirror of https://github.com/sbuffkin/hexmaker.git synced 2026-07-22 14:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix combo dropdown scroll: suppress modal-content overflow while open

Browse source 
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>
This commit is contained in:
isaprettycoolguy@protonmail.com 2026-05-23 12:42:04 -04:00
parent ff8479c59c
commit 83cd8e2da0
4 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/hex-map/HexEditorModal.ts
View file

@ -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) => {

10
src/hex-map/MapLinkModal.ts
View file

@ -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(""));

10
src/hex-map/SubmapPickerModal.ts
View file

@ -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(""));

10
styles.css
View file

@ -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;