From a3382212ea1ce4f299496572b8799eacaf235db8 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 18 Aug 2026 17:24:34 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?= =?UTF-8?q?=EC=95=A1=EC=85=98=20=EC=A4=84=20=EB=B6=84=EB=A6=AC=EA=B0=80=20?= =?UTF-8?q?=EB=8F=99=EC=9E=91=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8D=98=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EC=9E=90=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit splitSidebarActions가 body 직계자식(:scope >)에서만 .ui-sidebar-actions를 찾았지만, 실제 액션 줄은 페이지 패널 루트(b05-route__panel 등) 안에 있어 분리가 아예 일어나지 않았다 — 직전 커밋에서 sticky까지 걷어낸 상태라 액션 줄이 내용을 따라 끌려 올라갔다(2026-08-18 사용자 보고). - 깊이 무관하게 찾고, 액션 줄의 실제 부모를 기준으로 [스크롤 래퍼][액션 줄]로 쪼갠다. - body와 그 부모 사이 중간 요소에 ui-sidebar-fill을 붙여 높이 체인(플렉스 세로 확장 + min-height:0)을 이어준다. B08 목록의 자체 overflow도 이 규칙이 덮어 스크롤이 래퍼로 옮겨간다. Co-Authored-By: Claude Opus 5 (1M context) --- ui_template/ui_template_overlay.css | 16 +++++++++++++--- ui_template/ui_template_overlay.ts | 16 ++++++++++++---- 2 files changed, 25 insertions(+), 7 deletions(-) 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(