kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fe): structural flex layout fix for 100% viewport height zero-scroll fit

Browse Source
This commit is contained in:
김재현
2026-08-15 21:24:28 +09:00
parent c1d818bce7
commit 6483757ba0
4 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
-1
View File
@@ -138,7 +138,6 @@ const handleRetry = () => {
<DataGridShell
:rows="filteredJobs"
:columns="shadowRunColumns"
height="calc(100vh - 210px)"
empty-message="검색 조건에 맞는 배치 작업이 없습니다."
/>
</BatchOperationsPageV2>
frontend/src/shared/ui/DataGridShell.vue
+5 -1
View File
@@ -16,7 +16,7 @@ const emit = defineEmits<{ pageChange: [value: { page: number; pageSize: number
</script>
<template>
<section aria-label="데이터 표" :aria-busy="loading">
<section class="ks-grid-shell-section" aria-label="데이터 표" :aria-busy="loading">
<p v-if="loading">데이터를 불러오는 중입니다.</p>
<p v-else-if="rows.length === 0">{{ emptyMessage }}</p>
<KsDataGrid v-else :rows="rows" :columns="columns" :height="props.height" />
@@ -29,3 +29,7 @@ const emit = defineEmits<{ pageChange: [value: { page: number; pageSize: number
/>
</section>
</template>
<style scoped>
.ks-grid-shell-section { height: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; }
</style>
frontend/src/shared/ui/components/KsDataGrid.vue
+1 -1
View File
@@ -39,5 +39,5 @@ function onRowClicked(event: RowClickedEvent): void {
</template>
<style scoped>
.ks-grid { min-height: 12rem; border: 1px solid var(--ks-color-neutral-200); border-radius: var(--ks-radius-md); overflow: hidden; background: #fff; }
.ks-grid { flex: 1; min-height: 0; border: 1px solid var(--ks-color-neutral-200); border-radius: var(--ks-radius-md); overflow: hidden; background: #fff; }
</style>
frontend/src/shared/ui/layouts/PageLayout.vue
+6 -6
View File
@@ -17,15 +17,15 @@ defineProps<{ title: string; subtitle?: string; status?: string; asOf?: string;
</section>
</template>
<style scoped>
.ks-page { max-width: var(--ks-content-max); margin: 0 auto; display: grid; gap: var(--ks-space-4); }
.ks-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); }
.ks-page { max-width: var(--ks-content-max); margin: 0 auto; height: 100%; display: flex; flex-direction: column; gap: var(--ks-space-2); }
.ks-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); flex-shrink: 0; }
h1 { margin: 0; font-size: var(--ks-font-page); line-height: var(--ks-line-page); } p { margin: var(--ks-space-1) 0 0; color: var(--ks-color-neutral-600); }
.ks-page__meta { display: flex; gap: var(--ks-space-3); flex-wrap: wrap; margin-top: var(--ks-space-2); color: var(--ks-color-neutral-600); font-size: var(--ks-font-caption); }
.ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); }
.ks-page__filters { padding: var(--ks-space-3); }
.ks-page__workspace { min-width: 0; display: grid; gap: var(--ks-space-4); }
.ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); flex-shrink: 0; }
.ks-page__filters { padding: var(--ks-space-2) var(--ks-space-3); flex-shrink: 0; }
.ks-page__workspace { min-width: 0; flex: 1; display: grid; min-height: 0; gap: var(--ks-space-4); }
.ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
.ks-page__content, .ks-page__aside { min-width: 0; }
.ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.ks-page__footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--ks-space-2); padding: var(--ks-space-3); border: 1px solid var(--ks-color-neutral-200); background: rgb(255 255 255 / 96%); }
@media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }
</style>