fix(web): full-bleed responsive sweep across all screens (task #39)
Normalize 13 custom page roots to the .kx-page canon (flex:1, min-width:0, overflow-y:auto) fixing right-side dead space and bottom clipping inside the shell content flexbox; add missing narrow-width breakpoints to settlement KPIs and hall-assignment forms. No visual redesign - WISE shell and kx tokens intact. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
452398d941
commit
39660772ab
@ -6,7 +6,6 @@
|
||||
@import '../shared.css';
|
||||
|
||||
.kx-appqr {
|
||||
max-width: 1120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.kx-aq {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
@import '../shared.css';
|
||||
|
||||
.kx-rev {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
@ -3,9 +3,13 @@
|
||||
* 디자인 토큰(색·간격·radius)은 전역 변수를 재사용한다(과도한 신규 스타일 지양).
|
||||
*/
|
||||
.kx-bsales {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.kx-bsales__head {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.kx-comp {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
max-width: var(--container-max);
|
||||
}
|
||||
.kx-comp__head h1 {
|
||||
font-size: var(--fs-h1);
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
.kx-dash {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.kx-studio {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.kx-exh {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
max-width: var(--container-max);
|
||||
}
|
||||
|
||||
/* 헤더 카드 */
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.kx-cmp {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-5);
|
||||
max-width: var(--container-max);
|
||||
}
|
||||
.kx-cmp__head {
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
.kx-gallery {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
|
||||
@ -373,3 +373,14 @@
|
||||
z-index: 50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── 반응형 (공백없는 반응형 스윕 #39) — 배정 행/모달 폼 좁은 폭 단일 컬럼 ── */
|
||||
@media (max-width: 640px) {
|
||||
.kx-hall__row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.kx-hall__form2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,11 @@
|
||||
*/
|
||||
|
||||
.kx-settle {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 16px;
|
||||
padding: var(--gutter);
|
||||
}
|
||||
@ -458,3 +462,18 @@
|
||||
font-size: 13px;
|
||||
font-weight: var(--fw-semibold);
|
||||
}
|
||||
|
||||
/* ── 반응형 (공백없는 반응형 스윕 #39) — KPI/분포 좁은 폭 붕괴 방지 ── */
|
||||
@media (max-width: 900px) {
|
||||
.kx-settle__kpis {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.kx-settle__kpis {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.kx-settle__dist-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.kx-uord {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.kx-util {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user