From 6483757ba04adb30cc0e83fa861af23c92bb907a Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 21:24:28 +0900
Subject: [PATCH] fix(fe): structural flex layout fix for 100% viewport height
 zero-scroll fit

---
 .../src/features/shadow-run/pages/ShadowRunQueue.vue |  1 -
 frontend/src/shared/ui/DataGridShell.vue             |  6 +++++-
 frontend/src/shared/ui/components/KsDataGrid.vue     |  2 +-
 frontend/src/shared/ui/layouts/PageLayout.vue        | 12 ++++++------
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue b/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
index 8e825e0c..ecc8cf6e 100644
--- a/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
+++ b/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
@@ -138,7 +138,6 @@ const handleRetry = () => {
     <DataGridShell
       :rows="filteredJobs"
       :columns="shadowRunColumns"
-      height="calc(100vh - 210px)"
       empty-message="검색 조건에 맞는 배치 작업이 없습니다."
     />
   </BatchOperationsPageV2>
diff --git a/frontend/src/shared/ui/DataGridShell.vue b/frontend/src/shared/ui/DataGridShell.vue
index 4f784c76..b6854cf2 100644
--- a/frontend/src/shared/ui/DataGridShell.vue
+++ b/frontend/src/shared/ui/DataGridShell.vue
@@ -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>
diff --git a/frontend/src/shared/ui/components/KsDataGrid.vue b/frontend/src/shared/ui/components/KsDataGrid.vue
index babb6d58..d57a6b90 100644
--- a/frontend/src/shared/ui/components/KsDataGrid.vue
+++ b/frontend/src/shared/ui/components/KsDataGrid.vue
@@ -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>
diff --git a/frontend/src/shared/ui/layouts/PageLayout.vue b/frontend/src/shared/ui/layouts/PageLayout.vue
index c4752a28..b0b2a9b1 100644
--- a/frontend/src/shared/ui/layouts/PageLayout.vue
+++ b/frontend/src/shared/ui/layouts/PageLayout.vue
@@ -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>