diff --git a/B06_Section/B06_Section_UI_Standard_Panel.ts b/B06_Section/B06_Section_UI_Standard_Panel.ts index 6bdb37a6b..00b7d601e 100644 --- a/B06_Section/B06_Section_UI_Standard_Panel.ts +++ b/B06_Section/B06_Section_UI_Standard_Panel.ts @@ -349,7 +349,15 @@ export function createStandardPanel( }, }); showNote(); - field.root.querySelector(".ui-field__label")?.append(note); + const labelEl = field.root.querySelector(".ui-field__label"); + if (labelEl) { + // 라벨 글은 한 줄 말줄임 · 작은 글은 같은 줄 끝 — 줄 수가 늘어 칸이 어긋나지 않게 + const text = document.createElement("span"); + text.className = "b06-std__label-text"; + text.textContent = labelEl.textContent; + labelEl.classList.add("b06-std__label-row"); + labelEl.replaceChildren(text, note); + } field.input.step = "0.1"; field.input.min = "0"; // 경사 칸은 **각도도 함께 보인다** — 카드의 개별 절토각 칸이 도(°)로 받으므로 두 자리의 diff --git a/B06_Section/B06_Section_UI_Style.css b/B06_Section/B06_Section_UI_Style.css index 81e578837..497f66f12 100644 --- a/B06_Section/B06_Section_UI_Style.css +++ b/B06_Section/B06_Section_UI_Style.css @@ -296,8 +296,23 @@ } /* 공통 칸 라벨 끝 작은 글 — 고치기 전 암 · 포장이 실제로 쓰는 값(364-6 · 보기 전용) */ +.b06-std__label-row { + display: flex; + align-items: baseline; + min-width: 0; +} + +.b06-std__label-text { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .b06-std__group-note { - margin-left: var(--spacing-4); + flex: none; + margin-left: auto; + padding-left: var(--spacing-4); font-size: 0.9em; font-weight: normal; color: var(--color-text-muted); diff --git a/resources/tester/test_364_6b_std_note_same_line.py b/resources/tester/test_364_6b_std_note_same_line.py new file mode 100644 index 000000000..5adcfe662 --- /dev/null +++ b/resources/tester/test_364_6b_std_note_same_line.py @@ -0,0 +1,23 @@ +"""364-6 덧 2 — 암 글이 라벨과 같은 줄 끝(줄 수 안 늘림). 화면 실측은 브레인.""" + +import re +from pathlib import Path + +ROOT = Path(__file__).resolve().parents[2] +TS = (ROOT / "B06_Section/B06_Section_UI_Standard_Panel.ts").read_text(encoding="utf-8") +CSS = (ROOT / "B06_Section/B06_Section_UI_Style.css").read_text(encoding="utf-8") + + +def rule(sel: str) -> str: + m = re.search(re.escape(sel) + r"\s*\{([^}]*)\}", CSS) + assert m, sel + return m.group(1) + + +def test_label_row_one_line(): + assert "replaceChildren(text, note)" in TS + assert "display: flex" in rule(".b06-std__label-row") + text = rule(".b06-std__label-text") + assert "text-overflow: ellipsis" in text and "white-space: nowrap" in text + note = rule(".b06-std__group-note") + assert "margin-left: auto" in note and "white-space: nowrap" in note