From 9b56196d852650523f796bfe4a5a10fef7075188 Mon Sep 17 00:00:00 2001 From: ythong Date: Fri, 24 Jul 2026 13:11:55 +0900 Subject: [PATCH] fix(frontend): grid/card clipping sweep - G5 minmax(0,fr) on 7 split grids, table scroll wrappers on 6 screens Root cause (same as aab5e88): fr tracks without minmax(0,-) let chart/table min-content lock the track, clipping the right column or card content. Audit: _workspace/wiseui_audit.md (5 blockers + 2 suspects fixed). Co-Authored-By: Claude Fable 5 --- src/frontend/src/screens/admin/admin-modules.css | 2 +- src/frontend/src/screens/admin/admin.css | 5 ++++- src/frontend/src/screens/analytics/analytics.css | 10 ++++++++-- .../src/screens/docs/ReportAuthoringPage.tsx | 2 ++ .../screens/floorplan/BoothLayoutEditorPage.tsx | 2 ++ .../screens/hallassign/HallAssignmentPage.tsx | 2 ++ src/frontend/src/screens/marketing/marketing.css | 7 ++++++- .../src/screens/public/PublicTicketPage.tsx | 2 ++ src/frontend/src/screens/public/public.css | 7 +++++++ .../settlement/SettlementDashboardPage.tsx | 2 ++ src/frontend/src/screens/visitor/visitor.css | 16 +++++++++++++--- src/frontend/src/screens/work/MeetingPage.tsx | 2 ++ 12 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/screens/admin/admin-modules.css b/src/frontend/src/screens/admin/admin-modules.css index 0bc1dd8..2695729 100644 --- a/src/frontend/src/screens/admin/admin-modules.css +++ b/src/frontend/src/screens/admin/admin-modules.css @@ -272,7 +272,7 @@ .kx-adm-add__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-neutral-900); margin-bottom: var(--space-3); } .kx-adm-add__grid { display: grid; - grid-template-columns: 1.4fr 1.4fr 0.8fr; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 0.8fr); gap: var(--space-4); align-items: end; } diff --git a/src/frontend/src/screens/admin/admin.css b/src/frontend/src/screens/admin/admin.css index 6505557..861fec0 100644 --- a/src/frontend/src/screens/admin/admin.css +++ b/src/frontend/src/screens/admin/admin.css @@ -68,12 +68,15 @@ .kx-admin__split { display: grid; - grid-template-columns: 2fr 1fr; + /* G5: 좌측 방문추이 차트(ResponsiveContainer) 트랙을 minmax(0,·)로 수축 허용, + 우측 라이브리스트는 300px 하한 보장(패턴: dashboard aab5e88). */ + grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; } .kx-admin__chart { width: 100%; + min-width: 0; } .kx-admin__live { diff --git a/src/frontend/src/screens/analytics/analytics.css b/src/frontend/src/screens/analytics/analytics.css index 4d729b6..1bf707a 100644 --- a/src/frontend/src/screens/analytics/analytics.css +++ b/src/frontend/src/screens/analytics/analytics.css @@ -54,12 +54,17 @@ .kx-bi__split { display: grid; - grid-template-columns: 2fr 1fr; + /* G5(그리드 축소 불가) 근본 원인: 좌측 Recharts 차트 트랙이 min-content로 + 고정되면 우측 범례/요약 칼럼이 카드 밖으로 밀리고 차트가 짤린다. 좌측은 + minmax(0,·)로 수축 허용, 차트 자식에 min-width:0으로 ResponsiveContainer + min-content를 무력화한다(패턴: dashboard aab5e88). */ + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } .kx-bi__chart { width: 100%; + min-width: 0; } .kx-bi__forecast-legend { display: flex; @@ -106,7 +111,8 @@ } /* 전역 섹션의 하위 split은 동일 폭 2컬럼 */ .kx-bi__global .kx-bi__split { - grid-template-columns: 1fr 1fr; + /* G5: 좌우 차트 트랙 모두 minmax(0,·)로 수축 허용(min-content 상호 밀림 차단) */ + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kx-kpi__hint { font-size: var(--fs-caption); diff --git a/src/frontend/src/screens/docs/ReportAuthoringPage.tsx b/src/frontend/src/screens/docs/ReportAuthoringPage.tsx index e844fa0..e35945b 100644 --- a/src/frontend/src/screens/docs/ReportAuthoringPage.tsx +++ b/src/frontend/src/screens/docs/ReportAuthoringPage.tsx @@ -411,6 +411,7 @@ export function ReportAuthoringPage({ docType = '재해대처계획서' }: { doc

{docType}

+
@@ -435,6 +436,7 @@ export function ReportAuthoringPage({ docType = '재해대처계획서' }: { doc
+

1. 안전관리 조직체계

diff --git a/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx b/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx index 448f655..c5f13d2 100644 --- a/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx +++ b/src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx @@ -633,6 +633,7 @@ export function BoothLayoutEditorPage() { +
@@ -661,6 +662,7 @@ export function BoothLayoutEditorPage() { ))}
+
)} diff --git a/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx b/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx index bba6160..dbc0eeb 100644 --- a/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx +++ b/src/frontend/src/screens/hallassign/HallAssignmentPage.tsx @@ -564,6 +564,7 @@ function QuotePanel({ halls }: { halls: Hall[] }) { {result && (
+
@@ -583,6 +584,7 @@ function QuotePanel({ halls }: { halls: Hall[] }) {
{t('hallassign.qItem')}{t('hallassign.qBasis')}{t('hallassign.qAmount')}
{t('hallassign.deposit')}{fmtKrw(result.depositMin)} ~ {fmtKrw(result.depositMax)}
+
{result.capacityNote &&

{result.capacityNote}

} {result.disclaimer &&

{result.disclaimer} {t('hallassign.ruleset', { v: result.rulesetVersion })}

}
diff --git a/src/frontend/src/screens/marketing/marketing.css b/src/frontend/src/screens/marketing/marketing.css index 0cde977..2d66af8 100644 --- a/src/frontend/src/screens/marketing/marketing.css +++ b/src/frontend/src/screens/marketing/marketing.css @@ -117,10 +117,15 @@ /* 2열 분할 */ .kx-mkt__split { display: grid; - grid-template-columns: 2fr 1fr; + /* G5: 좌측 캠페인/EDM 리스트가 긴 문자열로 min-content 팽창해 우측 칼럼을 + 밀지 않도록 minmax(0,·)로 수축 허용(패턴: dashboard aab5e88). */ + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } +.kx-mkt__split > * { + min-width: 0; +} .kx-mkt__list-head { display: flex; align-items: center; diff --git a/src/frontend/src/screens/public/PublicTicketPage.tsx b/src/frontend/src/screens/public/PublicTicketPage.tsx index e912638..d0a7ef0 100644 --- a/src/frontend/src/screens/public/PublicTicketPage.tsx +++ b/src/frontend/src/screens/public/PublicTicketPage.tsx @@ -610,6 +610,7 @@ function ManageView() { +
@@ -635,6 +636,7 @@ function ManageView() { ))}
+
diff --git a/src/frontend/src/screens/public/public.css b/src/frontend/src/screens/public/public.css index ad291de..bc176af 100644 --- a/src/frontend/src/screens/public/public.css +++ b/src/frontend/src/screens/public/public.css @@ -2635,6 +2635,13 @@ font-size: var(--fs-body); color: var(--color-neutral-700); } +/* 좁은(모바일) 폭에서 금액/QR 칼럼 짤림 방지: 가로 스크롤 래퍼(W3-S3) */ +.kxp-ticktable-scroll { + overflow-x: auto; + min-width: 0; + max-width: 100%; + width: 100%; +} .kxp-ticktable { width: 100%; border-collapse: collapse; diff --git a/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx b/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx index 83e9418..86e3f58 100644 --- a/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx +++ b/src/frontend/src/screens/settlement/SettlementDashboardPage.tsx @@ -402,6 +402,7 @@ function ReportGroupTable({ title, groups, category }: { title: string; groups: {groups.length === 0 ? (

{t('settlement.reportEmpty')}

) : ( +
@@ -426,6 +427,7 @@ function ReportGroupTable({ title, groups, category }: { title: string; groups: ))}
+
)}
); diff --git a/src/frontend/src/screens/visitor/visitor.css b/src/frontend/src/screens/visitor/visitor.css index 98be2d4..ef1f307 100644 --- a/src/frontend/src/screens/visitor/visitor.css +++ b/src/frontend/src/screens/visitor/visitor.css @@ -102,10 +102,15 @@ /* 추이 + aside 분할 */ .kx-vis__split { display: grid; - grid-template-columns: 2fr 1fr; + /* G5: 좌측 차트 트랙을 minmax(0,·)로 수축 허용, 우측 범례/필터는 min-content + 상호 밀림 차단(패턴: dashboard aab5e88). */ + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } +.kx-vis__split > * { + min-width: 0; +} .kx-vis__legend { display: flex; gap: var(--space-3); @@ -486,10 +491,15 @@ /* ── SCR-32 리드 관리 ── */ .kx-vis__lead-split { display: grid; - grid-template-columns: 2fr 1fr; + /* G5: 좌측 리드 테이블 트랙을 minmax(0,·)로 수축 허용(내부 표는 가로 스크롤), + 우측 필터 칼럼 밀림 차단(패턴: dashboard aab5e88). */ + grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; } +.kx-vis__lead-split > * { + min-width: 0; +} .kx-vis__filters { display: flex; align-items: center; @@ -715,7 +725,7 @@ } .kx-vis__lead-actions-row { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); } diff --git a/src/frontend/src/screens/work/MeetingPage.tsx b/src/frontend/src/screens/work/MeetingPage.tsx index 23481f9..3b085c7 100644 --- a/src/frontend/src/screens/work/MeetingPage.tsx +++ b/src/frontend/src/screens/work/MeetingPage.tsx @@ -222,6 +222,7 @@ export function MeetingPage() { {/* 액션아이템 */}
액션아이템 +
@@ -261,6 +262,7 @@ export function MeetingPage() { ))}
+