diff --git a/M02_MasterTemplete/M02_MasterTemplete_Drawing.css b/M02_MasterTemplete/M02_MasterTemplete_Drawing.css index 982029d0..d6b91d2b 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Drawing.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Drawing.css @@ -73,3 +73,14 @@ margin-left: auto; white-space: nowrap; } + +.m02-pop { + display: block; +} + +.m02-pop > .ui-modal { + position: absolute; + width: 23rem; + max-width: calc(100vw - 16px); + box-shadow: 0 4px 16px rgb(0 0 0 / 25%); +} diff --git a/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts b/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts index c56f8da6..63ae1738 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Drawing.ts @@ -150,8 +150,17 @@ export function mountDrawingTemplate( title: "작도 영역", closeLabel: "닫기", dialogClass: "m02-modal", + backdropClass: "m02-pop", mount: (body) => body.append(areaForm), }); + // 단추 바로 아래 · 오른쪽 맞춤 · 화면 밖으로 안 나가게 + const dialog = document.querySelector(".m02-pop > .ui-modal"); + if (!dialog) return; + const at = areaButton.getBoundingClientRect(); + const width = dialog.offsetWidth; + dialog.style.top = `${at.bottom + 4}px`; + dialog.style.left = `${Math.max(8, Math.min(at.right - width, innerWidth - width - 8))}px`; + dialog.style.maxHeight = `${innerHeight - at.bottom - 12}px`; }); // CAD 안 💾 · Ctrl+S — 양식 파일은 페이지 [저장] 만 쓴다. 저장 중 또 눌러도 한 번만 부른다.