diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index 4c783fd6..b139123a 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -255,9 +255,19 @@ padding-bottom: 0; } -/* 마진·패딩 없는 순수 스크롤 래퍼. 그룹 간격(gap)은 페이지가 body에 준 값을 그대로 - 물려받아 기존 간격이 유지된다. */ -.ui-sidebar-split > .ui-sidebar-scroll { +/* body와 액션 줄 부모 사이의 중간 요소(페이지 패널 루트 b05-route__panel 등) — + 높이를 아래로 이어준다. 페이지 CSS가 준 gap·패딩은 그대로 둔다. */ +.ui-sidebar-split .ui-sidebar-fill { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +/* 마진·패딩 없는 순수 스크롤 래퍼. 그룹 간격(gap)은 페이지가 패널 루트에 준 값을 + 그대로 물려받아 기존 간격이 유지된다. */ +.ui-sidebar-split .ui-sidebar-scroll { flex: 1 1 auto; min-height: 0; display: flex; diff --git a/ui_template/ui_template_overlay.ts b/ui_template/ui_template_overlay.ts index a066a22c..3deb4200 100644 --- a/ui_template/ui_template_overlay.ts +++ b/ui_template/ui_template_overlay.ts @@ -90,14 +90,22 @@ function readOpenState(key: string): boolean { * 스크롤시킨다. 페이지는 지금처럼 본문 마지막에 액션 줄을 붙이기만 하면 된다. */ function splitSidebarActions(body: HTMLElement): void { - const actions = body.querySelector(":scope > .ui-sidebar-actions"); - if (!actions) return; + // 액션 줄은 보통 페이지 패널 루트(b05-route__panel 등) **안**에 있다 — body 직계가 + // 아니므로 깊이 무관하게 찾고, 액션 줄의 실제 부모 기준으로 쪼갠다. + const actions = body.querySelector(".ui-sidebar-actions"); + const container = actions?.parentElement; + if (!actions || !container) return; const scroll = document.createElement("div"); scroll.className = "ui-sidebar-scroll"; // 액션 줄 앞의 형제만 옮긴다 — 뒤에 붙은 요소(없어야 정상)는 그대로 둔다. - while (body.firstChild && body.firstChild !== actions) scroll.append(body.firstChild); - body.prepend(scroll); + while (container.firstChild && container.firstChild !== actions) + scroll.append(container.firstChild); + container.prepend(scroll); body.classList.add("ui-sidebar-split"); + // body → 부모 사이 중간 요소들이 높이를 이어주도록 표시한다(플렉스 세로 확장). + for (let el = container; el && el !== body; el = el.parentElement as HTMLElement) { + el.classList.add("ui-sidebar-fill"); + } } function createPanel(