fix(ui): stop table/grid clipping — min-width:0 + overflow-x sweep

Root cause: flex/grid children default min-width:auto let wide tables
blow out their track instead of scrolling, and .kx-dash__table-wrap
clipped with overflow:hidden. Converge the fix on the canonical
wrappers (.kx-table-scroll, .kx-dt) plus four screens lacking a scroll
wrapper (dashboard, admin matrix, settlement modal/report, hallassign
quote).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
zio 2026-07-14 02:25:18 +09:00
parent a3fdb62fc6
commit 3c8058546e
6 changed files with 23 additions and 2 deletions

View File

@ -9,6 +9,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-3);
/* 자신이 flex/grid 자식일 때 부모 폭 초과로 셸을 밀지 않도록 축소 허용. */
min-width: 0;
max-width: 100%;
} }
/* ── 툴바(검색 · 외부 필터 · CSV) ── */ /* ── 툴바(검색 · 외부 필터 · CSV) ── */

View File

@ -523,7 +523,8 @@
/* ── 권한 매트릭스(역할 × 권한) ── */ /* ── 권한 매트릭스(역할 × 권한) ── */
.kx-adm-matrix { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; } .kx-adm-matrix { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-4); align-items: start; }
.kx-adm-matrix__roles { padding: 0; overflow: hidden; } .kx-adm-matrix__roles { padding: 0; overflow: hidden; }
.kx-adm-matrix__perms { padding: var(--space-4); } /* 1fr 트랙 min-width:0 — 넓은 매트릭스 표가 트랙을 밀어 그리드를 터뜨리지 않도록(내부 스크롤 활성). */
.kx-adm-matrix__perms { padding: var(--space-4); min-width: 0; }
.kx-adm-permgrid { .kx-adm-permgrid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

View File

@ -182,7 +182,9 @@
border: var(--border-card); border: var(--border-card);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--color-white); background: var(--color-white);
overflow: hidden; /* overflow:hidden 은 넓은 표를 잘라냈다 → 가로 스크롤로 전환(모서리 클립 유지). */
overflow-x: auto;
min-width: 0;
} }
.kx-dash__section-head { .kx-dash__section-head {
display: flex; display: flex;

View File

@ -174,6 +174,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-2); gap: var(--space-2);
/* 견적 결과 표가 넓을 때 래퍼 없이도 잘리지 않도록 가로 스크롤. */
min-width: 0;
overflow-x: auto;
} }
.kx-hall__num { .kx-hall__num {
text-align: right; text-align: right;

View File

@ -228,6 +228,9 @@
padding: 20px; padding: 20px;
display: grid; display: grid;
gap: 16px; gap: 16px;
/* 라인아이템 표(.kx-settle__lines)가 모달 폭(max 720)을 넘으면 자기 안에서 가로 스크롤. */
min-width: 0;
overflow-x: auto;
} }
.kx-settle__meta { .kx-settle__meta {
display: flex; display: flex;
@ -457,6 +460,11 @@
gap: 16px; gap: 16px;
font-size: 13px; font-size: 13px;
} }
.kx-settle__report-group {
/* 카테고리/상태별 보고 표(6열)가 넓을 때 래퍼 없이도 잘리지 않도록 가로 스크롤. */
min-width: 0;
overflow-x: auto;
}
.kx-settle__report-group h3 { .kx-settle__report-group h3 {
margin: 0 0 6px; margin: 0 0 6px;
font-size: 13px; font-size: 13px;

View File

@ -264,6 +264,10 @@
} }
.kx-table-scroll { .kx-table-scroll {
overflow-x: auto; overflow-x: auto;
/* flex/grid 자식 함정 방지: 부모 폭에 맞춰 축소되고, 넓은 표는 자기 안에서 가로 스크롤. */
min-width: 0;
max-width: 100%;
width: 100%;
} }
.kx-table--zebra tbody tr:nth-child(even) { .kx-table--zebra tbody tr:nth-child(even) {
background: var(--zebra); background: var(--zebra);