diff --git a/M01_MasterData/SheetLogic/M01_SL_Diagram.css b/M01_MasterData/SheetLogic/M01_SL_Diagram.css index 22c75a9ab..e02858f66 100644 --- a/M01_MasterData/SheetLogic/M01_SL_Diagram.css +++ b/M01_MasterData/SheetLogic/M01_SL_Diagram.css @@ -52,10 +52,10 @@ display: none; } -/* 띠 — 화면 위 3분의 1 안쪽 · 길면 가로로 밀기 */ +/* 띠 — 세로는 상자 높이만큼 다 보임(사용자 요청) · 길면 가로로 밀기 */ .m01-sldg__band { - max-height: 33vh; - overflow: auto; + overflow-x: auto; + overflow-y: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-accent) 5%, var(--color-canvas)); diff --git a/M01_MasterData/SheetLogic/M01_SL_Entry.css b/M01_MasterData/SheetLogic/M01_SL_Entry.css index 5f6cd2c1a..0e04f2724 100644 --- a/M01_MasterData/SheetLogic/M01_SL_Entry.css +++ b/M01_MasterData/SheetLogic/M01_SL_Entry.css @@ -8,9 +8,9 @@ font-size: var(--text-body); } +/* 세 칸은 내용 높이만큼 — 넘치면 창(모달) 전체만 세로로 밈 */ .m01-sl .ui-modal__body { - flex: 1; - min-height: 0; + flex: 0 0 auto; gap: var(--spacing-12); } @@ -111,11 +111,10 @@ /* 위 가로 다이어그램 · 아래 왼쪽 시트 판 · 아래 오른쪽 결과 */ .m01-sl__layout { - flex: 1; - min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); - grid-template-rows: minmax(160px, 2fr) minmax(0, 3fr); + grid-template-rows: auto auto; + align-items: start; grid-template-areas: "diagram diagram" "panel result"; @@ -137,7 +136,6 @@ .m01-sl__part { display: flex; flex-direction: column; - min-height: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); } @@ -149,9 +147,7 @@ } .m01-sl__part-body { - flex: 1; - min-height: 0; - overflow: auto; + min-width: 0; padding: var(--spacing-12); } @@ -164,7 +160,6 @@ "diagram" "panel" "result"; - overflow: auto; } } diff --git a/M01_MasterData/SheetLogic/M01_SL_Entry_Paper.ts b/M01_MasterData/SheetLogic/M01_SL_Entry_Paper.ts index 7f73101d1..ca3b354a0 100644 --- a/M01_MasterData/SheetLogic/M01_SL_Entry_Paper.ts +++ b/M01_MasterData/SheetLogic/M01_SL_Entry_Paper.ts @@ -139,6 +139,18 @@ export async function fillOutside( return { sl: M.ev.applyOutside(sl, values), errors }; } +/* 시트 판 높이 — 그 시트가 쓰는 줄 수 + 두 줄(안쪽 세로 밀기 없게 · 사용자 요청) + * ponytail: 편집기 줄 높이 · 띠 높이를 숫자로 둠 — 편집기 꾸밈이 바뀌면 같이 고침 */ +const ROW_PX = 20; +const CHROME_PX = 26 + 24 + 24 + 20; // 위 띠 · 칸 머리 · 아래 상태줄 · 가로 밀기 막대 +function sheetHeight(sheet: { 칸: Record } | null): number { + const rows = Object.keys(sheet?.칸 ?? {}).reduce( + (most, a1) => Math.max(most, Number(a1.replace(/^[A-Z]+/, "")) || 0), + 0, + ); + return CHROME_PX + (Math.max(rows, 6) + 2) * ROW_PX; +} + /** 서버가 다시 셈한 합계 — 결과 상자 「계」 알약 칸의 서버 계산값(수식이 아니면 칸 값) */ function serverTotal(sl: SheetLogic): number | null { const box = sl.nodes.find((n) => n.kind === "result"); @@ -297,6 +309,7 @@ export function showPaper( panelHost.hidden = false; pickHint.hidden = true; toolsHost.className = ""; // 표 손잡이가 제 꾸밈 이름을 붙임 — 다른 종류로 바뀌면 지움 + panelHost.style.setProperty("--sl-sheet-h", `${sheetHeight(M.model.nodeSheet(sl, node.id))}px`); M.panel.renderPanel(panelHost, sl, node.id, { change: (next) => edit(next), pill: (nodeId, cell, dir, pillName) => edit(M.model.setPill(sl, nodeId, cell, dir, pillName)), diff --git a/M01_MasterData/SheetLogic/M01_SL_Panel.css b/M01_MasterData/SheetLogic/M01_SL_Panel.css index d67df74d1..cda9d83ea 100644 --- a/M01_MasterData/SheetLogic/M01_SL_Panel.css +++ b/M01_MasterData/SheetLogic/M01_SL_Panel.css @@ -54,6 +54,8 @@ .m01-slpanel-sheet { position: relative; min-height: 260px; + /* 그 시트가 쓰는 줄 수만큼(Entry 가 --sl-sheet-h 를 정함) — 안쪽 세로 밀기 없음(사용자 요청) */ + height: var(--sl-sheet-h, 260px); border: 1px solid var(--color-border); border-radius: var(--radius-cards); overflow: hidden;