From 3c8058546e78f53c1b338547455c2e3468f41d9c Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Tue, 14 Jul 2026 02:25:18 +0900
Subject: [PATCH] =?UTF-8?q?fix(ui):=20stop=20table/grid=20clipping=20?=
 =?UTF-8?q?=E2=80=94=20min-width:0=20+=20overflow-x=20sweep?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/frontend/src/components/data-table.css         | 3 +++
 src/frontend/src/screens/admin/admin-modules.css   | 3 ++-
 src/frontend/src/screens/dashboard/dashboard.css   | 4 +++-
 src/frontend/src/screens/hallassign/hallassign.css | 3 +++
 src/frontend/src/screens/settlement/settlement.css | 8 ++++++++
 src/frontend/src/screens/shared.css                | 4 ++++
 6 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/data-table.css b/src/frontend/src/components/data-table.css
index 97a6072..a88aecd 100644
--- a/src/frontend/src/components/data-table.css
+++ b/src/frontend/src/components/data-table.css
@@ -9,6 +9,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
+  /* 자신이 flex/grid 자식일 때 부모 폭 초과로 셸을 밀지 않도록 축소 허용. */
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* ── 툴바(검색 · 외부 필터 · CSV) ── */
diff --git a/src/frontend/src/screens/admin/admin-modules.css b/src/frontend/src/screens/admin/admin-modules.css
index c26d26c..5e20e8a 100644
--- a/src/frontend/src/screens/admin/admin-modules.css
+++ b/src/frontend/src/screens/admin/admin-modules.css
@@ -523,7 +523,8 @@
 /* ── 권한 매트릭스(역할 × 권한) ── */
 .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__perms { padding: var(--space-4); }
+/* 1fr 트랙 min-width:0 — 넓은 매트릭스 표가 트랙을 밀어 그리드를 터뜨리지 않도록(내부 스크롤 활성). */
+.kx-adm-matrix__perms { padding: var(--space-4); min-width: 0; }
 .kx-adm-permgrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
diff --git a/src/frontend/src/screens/dashboard/dashboard.css b/src/frontend/src/screens/dashboard/dashboard.css
index 10c9212..01a0b26 100644
--- a/src/frontend/src/screens/dashboard/dashboard.css
+++ b/src/frontend/src/screens/dashboard/dashboard.css
@@ -182,7 +182,9 @@
   border: var(--border-card);
   border-radius: var(--radius-lg);
   background: var(--color-white);
-  overflow: hidden;
+  /* overflow:hidden 은 넓은 표를 잘라냈다 → 가로 스크롤로 전환(모서리 클립 유지). */
+  overflow-x: auto;
+  min-width: 0;
 }
 .kx-dash__section-head {
   display: flex;
diff --git a/src/frontend/src/screens/hallassign/hallassign.css b/src/frontend/src/screens/hallassign/hallassign.css
index f66f54e..264d7e9 100644
--- a/src/frontend/src/screens/hallassign/hallassign.css
+++ b/src/frontend/src/screens/hallassign/hallassign.css
@@ -174,6 +174,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
+  /* 견적 결과 표가 넓을 때 래퍼 없이도 잘리지 않도록 가로 스크롤. */
+  min-width: 0;
+  overflow-x: auto;
 }
 .kx-hall__num {
   text-align: right;
diff --git a/src/frontend/src/screens/settlement/settlement.css b/src/frontend/src/screens/settlement/settlement.css
index 663dd4a..5c558e5 100644
--- a/src/frontend/src/screens/settlement/settlement.css
+++ b/src/frontend/src/screens/settlement/settlement.css
@@ -228,6 +228,9 @@
   padding: 20px;
   display: grid;
   gap: 16px;
+  /* 라인아이템 표(.kx-settle__lines)가 모달 폭(max 720)을 넘으면 자기 안에서 가로 스크롤. */
+  min-width: 0;
+  overflow-x: auto;
 }
 .kx-settle__meta {
   display: flex;
@@ -457,6 +460,11 @@
   gap: 16px;
   font-size: 13px;
 }
+.kx-settle__report-group {
+  /* 카테고리/상태별 보고 표(6열)가 넓을 때 래퍼 없이도 잘리지 않도록 가로 스크롤. */
+  min-width: 0;
+  overflow-x: auto;
+}
 .kx-settle__report-group h3 {
   margin: 0 0 6px;
   font-size: 13px;
diff --git a/src/frontend/src/screens/shared.css b/src/frontend/src/screens/shared.css
index 1077c8f..1ab9303 100644
--- a/src/frontend/src/screens/shared.css
+++ b/src/frontend/src/screens/shared.css
@@ -264,6 +264,10 @@
 }
 .kx-table-scroll {
   overflow-x: auto;
+  /* flex/grid 자식 함정 방지: 부모 폭에 맞춰 축소되고, 넓은 표는 자기 안에서 가로 스크롤. */
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
 }
 .kx-table--zebra tbody tr:nth-child(even) {
   background: var(--zebra);