king/dbx-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cupang): 3열 프레임 높이를 그리드 행(1fr)로 고정 — ③ 목록만 스크롤

Browse Source 
원인: .cpg-calc3 의 행 높이가 auto 라 카드가 화면 아래로 넘치도록 늘어났고,
페이지 스크롤도 없어서 아래쪽(마지막 상자, [+ 새 혼합 상자])이 잘렸다.

- grid-template-rows: minmax(0,1fr) 로 행을 컨테이너 높이에 고정
- 카드 overflow:hidden, ①표/②목록/③센터목록만 내부 스크롤
- 그동안 덧댄 !important 패치와 JS 높이 강제 지정 제거(충돌 정리)
- 2열/1열로 접히면 행이 여러 개라 카드 max-height(76vh)로 처리

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
king
2026-09-01 17:38:51 +09:00
parent f1c16e8282
commit ca87c254c0
7 changed files with 33 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/cupang.css
+26 -42
View File
@@ -1466,55 +1466,39 @@ body.cpg-dragging { cursor: grabbing; user-select: none; }
/* 용량 초과 표시 */
.cpg-mix-fill.is-over { color: var(--color-callout-red); font-weight: 600; }
/* ── 스크롤 확실히 (부모 높이 계산 실패해도 동작하도록 이중 안전장치) ── */
/* 카드마다 최대 높이 → 넘치면 카드 자체가 스크롤된다 */
.cpg-calc3 > .erp-card { max-height: min(82vh, 900px); }
.cpg-dist-card { overflow-y: auto; overflow-x: hidden; }
/* 안쪽 목록은 스크롤바 자리를 항상 확보해 두어 눈에 보이게 */
.cpg-dist-card .cpg-dist-list,
/* ══════════════════════════════════════════════════════════════
상자 계산 3열 — 프레임 높이/스크롤 (한 곳에서만 정의)
· .cpg-calc3 는 남은 화면 높이를 채우고 행 높이를 1fr 로 고정한다.
(기본 auto 행이면 카드가 화면 밖까지 늘어나 잘려 보인다)
· 카드는 넘치는 부분을 감추고, 안쪽 목록만 스크롤한다.
══════════════════════════════════════════════════════════════ */
.cpg-calc3 { grid-template-rows: minmax(0, 1fr); }
.cpg-calc3 > .erp-card { min-height: 0; overflow: hidden; }
.cpg-calc-card .erp-table-wrap,
.cpg-calc-sum .cpg-sum-scroll,
.cpg-calc-card .erp-table-wrap {
.cpg-dist-card .cpg-dist-list {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
/* 크롬/웨일에서 오버레이 스크롤바가 숨지 않도록 폭을 지정 */
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar,
.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar,
.cpg-calc-card .erp-table-wrap::-webkit-scrollbar,
.cpg-dist-card::-webkit-scrollbar { width: 10px; }
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb,
.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb,
.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar,
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar { width: 10px; }
.cpg-calc-card .erp-table-wrap::-webkit-scrollbar-thumb,
.cpg-dist-card::-webkit-scrollbar-thumb {
background: var(--color-subtle-ash);
border-radius: 999px;
.cpg-calc-sum .cpg-sum-scroll::-webkit-scrollbar-thumb,
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb {
background: var(--color-subtle-ash); border-radius: 999px;
}
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover,
.cpg-dist-card::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
.cpg-dist-card .cpg-dist-list::-webkit-scrollbar-thumb:hover { background: var(--color-midtone-gray); }
/* ── 스크롤 최종 보정 — id 선택자 + !important 로 확정 ── */
/* ③ 센터 목록은 카드 안에서만 스크롤 */
#cpg-dist-list {
min-height: 0 !important;
overflow-y: auto !important;
/* 3열이 2열/1열로 접히면 행이 여러 개라 1fr 고정이 통하지 않는다.
그때는 카드마다 최대 높이를 준다. */
@media (max-width: 1500px) {
.cpg-calc3 { grid-template-rows: none; }
.cpg-calc3 > .erp-card { max-height: min(76vh, 820px); }
}
.cpg-calc-card .erp-table-wrap {
max-height: 52vh !important;
overflow-y: auto !important;
}
.cpg-calc-sum .cpg-sum-scroll {
max-height: 52vh !important;
overflow-y: auto !important;
}
.cpg-calc3 > .erp-card { max-height: 86vh !important; }
/* ③ 센터 분배 — 카드는 잘라내고 목록만 스크롤 */
.cpg-dist-card { overflow: hidden !important; }
.cpg-dist-card .cpg-dist-list {
flex: 1 1 auto;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden;
}