zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): grid/card clipping sweep - G5 minmax(0,fr) on 7 split grids, table scroll wrappers on 6 screens

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
ythong 2026-07-24 13:11:55 +09:00
parent 6acfeab1ab
commit 9b56196d85
12 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/src/screens/admin/admin-modules.css
View File

@ -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;
}

5
src/frontend/src/screens/admin/admin.css
View File

@ -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 {

10
src/frontend/src/screens/analytics/analytics.css
View File

@ -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);

2
src/frontend/src/screens/docs/ReportAuthoringPage.tsx
View File

@ -411,6 +411,7 @@ export function ReportAuthoringPage({ docType = '재해대처계획서' }: { doc
<div className="kx-rep__a4-title">
<h2><IconDocument className="kx-title-ic" size={18} />{docType}</h2>
</div>
<div className="kx-table-scroll">
<table className="kx-rep__table">
<tbody>
<tr>
@ -435,6 +436,7 @@ export function ReportAuthoringPage({ docType = '재해대처계획서' }: { doc
</tr>
</tbody>
</table>
</div>
<section>
<h4>1. 안전관리 조직체계</h4>

2
src/frontend/src/screens/floorplan/BoothLayoutEditorPage.tsx
View File

@ -633,6 +633,7 @@ export function BoothLayoutEditorPage() {
<GridPdfButton title="배치안 이력" columns={historyPdfColumns} rows={historyPdfRows} disabled={(versionsQuery.data?.length ?? 0) === 0} />
</div>
</div>
<div className="kx-table-scroll">
<table className="kx-table kx-editor__hist-table">
<thead>
<tr>
@ -661,6 +662,7 @@ export function BoothLayoutEditorPage() {
))}
</tbody>
</table>
</div>
</>
)}
</Modal>

2
src/frontend/src/screens/hallassign/HallAssignmentPage.tsx
View File

@ -564,6 +564,7 @@ function QuotePanel({ halls }: { halls: Hall[] }) {
{result && (
<div className="kx-hall__quoteresult">
<div className="kx-table-scroll">
<table className="kx-table">
<thead>
<tr><th>{t('hallassign.qItem')}</th><th>{t('hallassign.qBasis')}</th><th className="kx-hall__num">{t('hallassign.qAmount')}</th></tr>
@ -583,6 +584,7 @@ function QuotePanel({ halls }: { halls: Hall[] }) {
<tr><td colSpan={2}>{t('hallassign.deposit')}</td><td className="kx-hall__num">{fmtKrw(result.depositMin)} ~ {fmtKrw(result.depositMax)}</td></tr>
</tfoot>
</table>
</div>
{result.capacityNote && <p className="kx-hall__note"><IconWarning size={14} /> {result.capacityNote}</p>}
{result.disclaimer && <p className="kx-card__hint">{result.disclaimer} {t('hallassign.ruleset', { v: result.rulesetVersion })}</p>}
</div>

7
src/frontend/src/screens/marketing/marketing.css
View File

@ -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;

2
src/frontend/src/screens/public/PublicTicketPage.tsx
View File

@ -610,6 +610,7 @@ function ManageView() {
</div>
</div>
<div className="kxp-ticktable-scroll">
<table className="kxp-ticktable">
<thead>
<tr>
@ -635,6 +636,7 @@ function ManageView() {
))}
</tbody>
</table>
</div>
<div className="kxp-booker">
<div className="kxp-booker__id">

7
src/frontend/src/screens/public/public.css
View File

@ -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;

2
src/frontend/src/screens/settlement/SettlementDashboardPage.tsx
View File

@ -402,6 +402,7 @@ function ReportGroupTable({ title, groups, category }: { title: string; groups:
{groups.length === 0 ? (
<p className="kx-settle__muted">{t('settlement.reportEmpty')}</p>
) : (
<div className="kx-table-scroll">
<table className="kx-table kx-table--zebra">
<thead>
<tr>
@ -426,6 +427,7 @@ function ReportGroupTable({ title, groups, category }: { title: string; groups:
))}
</tbody>
</table>
</div>
)}
</div>
);

16
src/frontend/src/screens/visitor/visitor.css
View File

@ -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);
}

2
src/frontend/src/screens/work/MeetingPage.tsx
View File

@ -222,6 +222,7 @@ export function MeetingPage() {
{/* 액션아이템 */}
<div className="kx-field">
<span className="kx-label">액션아이템</span>
<div className="kx-table-scroll">
<table className="kx-list-table">
<thead>
<tr>
@ -261,6 +262,7 @@ export function MeetingPage() {
))}
</tbody>
</table>
</div>
<div className="kx-thread__compose" style={{ marginTop: 8 }}>
<input
className="kx-input"