From ef4cdb667a8b03f00b153cb3c89d44a269388631 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 8 Sep 2026 18:22:27 +0900 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=EC=A2=81=EC=9D=80=20=ED=8F=AD?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=91=90=20=EC=98=A4=EB=B2=84=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EA=B0=80=20=EB=B3=B8=EB=AC=B8=EC=9D=84=20=EB=8D=AE?= =?UTF-8?q?=EB=8D=98=20=EA=B2=83=20=E2=80=94=20=EB=B3=B8=EB=AC=B8=EC=97=90?= =?UTF-8?q?=20=EB=82=A8=EA=B8=B8=20=EC=B5=9C=EC=86=8C=20=ED=8F=AD=EC=9D=84?= =?UTF-8?q?=20=EC=A0=95=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ⚠ 「넘침은 0 인데 못 읽는」 자리였음. 표가 자기 스크롤 안에서 잘려 넘침 수치로는 안 잡히고, 실제로는 좌측 패널(320 고정)과 진행단계 패널(fixed)이 화면을 덮고 있었음. 실측(B08, 본문에 남는 폭) 860px 348 → 388 760px 248 → 288 620px 108 → 175 500px 4 → 194 1400·1000 은 그대로 (넓은 화면 배치 안 건드림) 방법 — 패널을 비율(vw)로 줄이면 좁아질수록 본문도 같이 줄어 결국 못 읽음. 그래서 **본문에 남길 폭**(--wf-min-content-width: 320px)을 정하고 패널이 그만큼 물러나게 함. 좁은 폭 전용 패널 폭(--wf-left-panel-narrow-width: 280px)도 따로 둠. 진행단계 패널은 폭을 줄이고 아래로 내려 본문 윗부분(탭·표 머리)을 안 가리게 함. 확인 — B03·B05·B06·B07·B08·B09 를 1400·760 두 폭에서 훑음. 문서 넘침 전부 0, 넓은 폭 배치 변화 없음(좌측 320 유지). Co-Authored-By: Claude Opus 5 (1M context) --- ui_template/ui_template_overlay.css | 21 +++++++++++++++++++++ ui_template/ui_template_theme.css | 5 +++++ 2 files changed, 26 insertions(+) diff --git a/ui_template/ui_template_overlay.css b/ui_template/ui_template_overlay.css index c0e2062c..97a6daad 100644 --- a/ui_template/ui_template_overlay.css +++ b/ui_template/ui_template_overlay.css @@ -61,6 +61,27 @@ /* 끌어 옮기기 (2026-09-04) — 헤더를 잡아 끈다. 자리를 옮기면 인라인 left/top이 위 고정값을 덮어쓴다. 아래 공간이 모자라면 `is-flip-up`으로 헤더 위로 펼친다. */ +/* 좁은 폭 — 두 패널이 본문을 덮어 「넘침은 0 인데 못 읽는」 화면이 된다. + 2026-09-08 실측(B08): 본문에 남는 폭이 860px 에서 348 · 760 에서 248 · 620 에서 108 · + 500 에서 **4px** 였다. 표는 자기 스크롤 안에서 잘리므로 넘침 수치로는 안 잡힌다. + ⇒ 폭에 따라 패널을 줄이고, 진행단계는 **아래로 내려** 본문 윗부분(탭·표 머리)을 + 가리지 않게 한다. 넓은 화면 배치는 그대로 둔다. */ +@media (max-width: 860px) { + /* ⚠ 「본문에 최소 이만큼은 남긴다」로 잡는다 — 패널을 비율(vw)로 줄이면 좁아질수록 + 본문도 같이 줄어 결국 못 읽는다. 남길 폭을 정하고 패널이 그만큼 물러나게 한다. */ + .ui-workflow-overlay__panel--title { + width: min(var(--wf-left-panel-narrow-width), calc(100vw - var(--wf-min-content-width))); + } + + .ui-workflow-overlay__panel--progress { + top: auto; + bottom: var(--spacing-16); + right: var(--spacing-8); + width: min(calc(var(--wf-left-panel-width) / 2), 22vw); + max-height: 40vh; + } +} + .ui-workflow-overlay__panel--progress .ui-workflow-overlay__header { cursor: move; touch-action: none; diff --git a/ui_template/ui_template_theme.css b/ui_template/ui_template_theme.css index 181d418e..6ff260f1 100644 --- a/ui_template/ui_template_theme.css +++ b/ui_template/ui_template_theme.css @@ -186,6 +186,11 @@ /* 워크플로우 3단 레이아웃 (frontend.md §2) */ --wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */ --wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */ + /* 좁은 폭에서 좌측 패널이 물러나며 **본문에 남겨 두는 최소 폭**(2026-09-08). + 이 값이 없으면 패널이 화면을 거의 다 덮어 「넘침 0 인데 못 읽는」 화면이 된다. */ + --wf-min-content-width: 320px; + /* 좁은 폭에서 쓰는 좌측 패널 폭 — 입력 칸이 아직 읽히는 선까지만 줄인다. */ + --wf-left-panel-narrow-width: 280px; /* --------------------------------------------------------------------------- * 8. 상호작용 (Motion & Z-index)