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';
|
@import '../shared.css';
|
||||||
|
|
||||||
.kx-appqr {
|
.kx-appqr {
|
||||||
max-width: 1120px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-6);
|
gap: var(--space-6);
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
.kx-aq {
|
.kx-aq {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -2,6 +2,8 @@
|
|||||||
@import '../shared.css';
|
@import '../shared.css';
|
||||||
|
|
||||||
.kx-rev {
|
.kx-rev {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -3,9 +3,13 @@
|
|||||||
* 디자인 토큰(색·간격·radius)은 전역 변수를 재사용한다(과도한 신규 스타일 지양).
|
* 디자인 토큰(색·간격·radius)은 전역 변수를 재사용한다(과도한 신규 스타일 지양).
|
||||||
*/
|
*/
|
||||||
.kx-bsales {
|
.kx-bsales {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
padding: var(--space-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kx-bsales__head {
|
.kx-bsales__head {
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
.kx-comp {
|
.kx-comp {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
padding: var(--space-5);
|
padding: var(--space-5);
|
||||||
max-width: var(--container-max);
|
|
||||||
}
|
}
|
||||||
.kx-comp__head h1 {
|
.kx-comp__head h1 {
|
||||||
font-size: var(--fs-h1);
|
font-size: var(--fs-h1);
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
.kx-dash {
|
.kx-dash {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-5);
|
gap: var(--space-5);
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
.kx-studio {
|
.kx-studio {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
.kx-exh {
|
.kx-exh {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-5);
|
gap: var(--space-5);
|
||||||
padding: var(--space-5);
|
padding: var(--space-5);
|
||||||
max-width: var(--container-max);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 헤더 카드 */
|
/* 헤더 카드 */
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
.kx-cmp {
|
.kx-cmp {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-5);
|
gap: var(--space-5);
|
||||||
padding: var(--space-5);
|
padding: var(--space-5);
|
||||||
max-width: var(--container-max);
|
|
||||||
}
|
}
|
||||||
.kx-cmp__head {
|
.kx-cmp__head {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
.kx-gallery {
|
.kx-gallery {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--space-4);
|
gap: var(--space-4);
|
||||||
|
|||||||
@ -373,3 +373,14 @@
|
|||||||
z-index: 50;
|
z-index: 50;
|
||||||
cursor: pointer;
|
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 {
|
.kx-settle {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow-y: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
align-content: start;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: var(--gutter);
|
padding: var(--gutter);
|
||||||
}
|
}
|
||||||
@ -458,3 +462,18 @@
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: var(--fw-semibold);
|
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 {
|
.kx-uord {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -1,4 +1,6 @@
|
|||||||
.kx-util {
|
.kx-util {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user