fix(cupang): 박스 계산 화면 2열 배치·표 잘림 방지
입력표와 요약을 좌우 2열 그리드로 배치(1280px 이하는 세로 쌓기). 입력표는 자체 스크롤(max-height + sticky thead)로 행이 늘어도 카드가 잘리지 않게 하고, 요약 그리드 최소 폭을 줄여 좁은 열에서도 카드가 한 줄에 맞게 조정. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+28
-3
@@ -346,7 +346,7 @@
|
||||
|
||||
.cpg-sum-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.cpg-kpi {
|
||||
@@ -364,7 +364,7 @@
|
||||
|
||||
.cpg-sum-prods {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.cpg-sum-prod {
|
||||
@@ -394,7 +394,7 @@
|
||||
/* 혼합 박스 카드 */
|
||||
.cpg-sum-boxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.cpg-box-card {
|
||||
@@ -489,3 +489,28 @@
|
||||
}
|
||||
.cpg-box-fill { opacity: .16; }
|
||||
}
|
||||
|
||||
/* 박스 계산 2열 레이아웃 — 왼쪽 입력표 / 오른쪽 요약. 좁으면 세로로 쌓임. */
|
||||
.cpg-calc-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
.cpg-calc-layout > .erp-card { margin-bottom: 0; }
|
||||
@media (max-width: 1280px) {
|
||||
.cpg-calc-layout { grid-template-columns: minmax(0, 1fr); }
|
||||
}
|
||||
|
||||
/* 행이 많아도 카드가 잘리지 않도록 표 자체를 스크롤시킨다. */
|
||||
.cpg-calc-card .erp-table-wrap {
|
||||
overflow: auto;
|
||||
max-height: min(58vh, 560px);
|
||||
}
|
||||
.cpg-calc-card .cpg-calc-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--color-canvas-white);
|
||||
}
|
||||
.cpg-calc-actions { flex-wrap: wrap; }
|
||||
|
||||
Reference in New Issue
Block a user