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

fix(ui): approval queue grid — remove fixed-viewport clipping, flow with page scroll

Browse Source 
Owner directive: grids must render fully without internal scrollbars
(pagination handles row counts). .kx-aq was the only data-grid shell with
height:100% + overflow:hidden/auto clipping; now page-flow with sticky side.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
zio 2026-07-14 21:35:45 +09:00
parent 7b861a4af2
commit 7a735a4c71
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/frontend/src/screens/approval/approval-queue.css
View File

@ -3,8 +3,9 @@
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; /* 페이지-영역 스크롤(.kx-page 모델). 고정 100% 높이 셸을 제거해 표가 잘리지 않고
min-height: 0; * 내용 높이만큼 늘어나며, 넘칠 때만 이 루트가 스크롤(내부 그리드 스크롤 없음). */
overflow-y: auto;
} }
.kx-aq__head { .kx-aq__head {
display: flex; display: flex;
@ -99,16 +100,16 @@
.kx-aq__body { .kx-aq__body {
display: flex; display: flex;
flex: 1; flex: 1;
min-height: 0; /* overflow:hidden 제거 — 본문이 내용 높이만큼 늘어나고 루트(.kx-aq)가 스크롤. */
overflow: hidden;
} }
.kx-aq__main { .kx-aq__main {
flex: 1; flex: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-3);
padding: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5);
overflow: auto; /* overflow:auto 제거 — 표 내부 세로 스크롤 대신 페이지 흐름으로 전체 노출. */
} }
.kx-aq__main-head { .kx-aq__main-head {
display: flex; display: flex;
@ -180,13 +181,17 @@
/* side */ /* side */
.kx-aq__side { .kx-aq__side {
width: 320px; width: 320px;
flex: none;
border-left: var(--border-card); border-left: var(--border-card);
background: var(--color-neutral-050); background: var(--color-neutral-050);
padding: var(--space-5); padding: var(--space-5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--space-4);
overflow-y: auto; /* 표 높이에 스트레치되지 않고, 페이지 스크롤 시 상단에 고정 유지. */
align-self: flex-start;
position: sticky;
top: 0;
} }
.kx-aq__card { .kx-aq__card {
background: var(--color-white); background: var(--color-white);