From b525a13670bb0b70482080e42525977331925bdb Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 8 Sep 2026 18:14:18 +0900 Subject: [PATCH] =?UTF-8?q?fix(B09):=20=EC=A2=81=EC=9D=80=20=ED=8F=AD?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=91=9C=EA=B0=80=20=EB=B0=94=EA=B9=A5=20?= =?UTF-8?q?=EC=B9=B8=EC=9D=84=20=EB=B0=80=EC=96=B4=EB=82=B4=EB=8D=98=20?= =?UTF-8?q?=EA=B2=83=20=EA=B3=A0=EC=B9=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 실측(창 620) — .b09-main 이 1,190px 밀려 나감. 원인이 세 겹이었음. - .b09-main · 표를 감싸는 body 칸에 min-width: 0 이 없었음. flex 자식 기본 최소폭이 auto 라 안쪽 표의 최소폭(칸이 nowrap)을 그대로 물었음. - ⚠ 진짜 원인은 그 아래였음 — .b09-sheet 가 **감싸는 칸(div)에 붙는 자리와 표(table)에 바로 붙는 자리**가 둘 다 있음(내역서·자재대는 표에 직접). 표에는 overflow 가 안 먹어 표 폭만큼 바깥이 밀렸음. table.b09-sheet 를 블록으로 바꿔 제 안에서 가로로 넘어가게 함. - 주석에 백틱을 쓰면 템플릿 문자열이 끊김 — 그 사실을 주석에 남김(한 번 겪음). 실측: 다섯 탭(공사원가계산서·설계내역서·일위대가·단가산출근거·관급·사급) × 창 1400·620 전부 몸통 가로밀림 없음·넘침 0px, 표만 제 안에서 스크롤. Co-Authored-By: Claude Opus 5 (1M context) --- B09_Estimation/B09_Estimation_UI_Page.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/B09_Estimation/B09_Estimation_UI_Page.ts b/B09_Estimation/B09_Estimation_UI_Page.ts index 700db411..36ffc8a4 100644 --- a/B09_Estimation/B09_Estimation_UI_Page.ts +++ b/B09_Estimation/B09_Estimation_UI_Page.ts @@ -160,7 +160,12 @@ function injectStyles(): void { .b09-panel__actions { display: flex; gap: var(--space-xs, 4px); margin-top: var(--space-sm, 8px); } .b09-hint { font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary); } -.b09-main { display: flex; flex-direction: column; gap: var(--space-sm, 8px); height: 100%; min-height: 0; } +/* ⚠ min-width: 0 이 빠지면 **표가 넓은 만큼 이 칸이 통째로 밀려 나간다**(2026-09-08 실측: + 창 620 에서 1,190px 넘침). flex 자식의 기본 최소폭이 auto 라 안쪽 표의 최소폭 + (칸이 nowrap)을 그대로 물기 때문이다. 0 으로 끊어야 아래 .b09-sheet 의 + overflow: auto 가 제 몫을 해서 **표만 제 안에서 가로로 넘어간다.** + ⚠ 이 주석 안에 백틱을 쓰지 말 것 — 이 블록은 템플릿 문자열 안이라 거기서 끊긴다. */ +.b09-main { display: flex; flex-direction: column; gap: var(--space-sm, 8px); height: 100%; min-height: 0; min-width: 0; } .b09-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--color-border); padding-bottom: 6px; } .b09-tab { font-size: var(--font-size-xs, 12px); padding: 2px 8px; cursor: pointer; @@ -169,7 +174,12 @@ function injectStyles(): void { .b09-tab.is-active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-surface); } .b09-tab:disabled { cursor: not-allowed; opacity: .55; } -.b09-sheet { overflow: auto; min-height: 0; flex: 1; } +.b09-sheet { overflow: auto; min-height: 0; min-width: 0; flex: 1; } +/* ⚠ 이 클래스가 **감싸는 칸(div)에 붙는 자리와 표(table)에 바로 붙는 자리**가 둘 다 있다 + (내역서·자재대는 표에 직접 붙인다). 표는 그대로 두면 overflow 가 안 먹어 **표 폭만큼 + 바깥 칸을 밀어낸다**(2026-09-08 실측: 창 620 에서 1,190px). 블록으로 바꾸면 제 안에서 + 가로로 넘어가고 바깥은 안 밀린다. 표 안쪽(thead·tbody)의 칸 배치는 그대로다. */ +table.b09-sheet { display: block; overflow-x: auto; max-width: 100%; } .b09-sheet table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 13px); } .b09-sheet th, .b09-sheet td { border-bottom: 1px solid var(--color-border); padding: 4px 8px; text-align: right; @@ -775,6 +785,10 @@ export async function renderB09Estimation(root: HTMLElement): Promise { const body = document.createElement("div"); body.style.flex = "1"; body.style.minHeight = "0"; + // ⚠ 세로와 마찬가지로 **가로도 0 으로 끊어야** 한다(2026-09-08 실측). 안 끊으면 이 칸이 + // 안쪽 표의 최소폭(칸이 nowrap)을 그대로 물어 창 620 에서 1,190px 밀려 나갔다. + // 0 이면 아래 .b09-sheet 의 overflow:auto 가 살아나 **표만 제 안에서 가로로 넘어간다.** + body.style.minWidth = "0"; body.style.display = "flex"; body.style.flexDirection = "column";