From bacde3f529fbee4bb107e93d0962c37440871723 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 00:54:19 +0900
Subject: [PATCH] fix(fe): revert PageLayout to flexbox - fix grid gap
 calculation issue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: CSS Grid with optional (v-if) children caused inconsistent row counts.
Grid-template-rows: auto auto auto auto 1fr auto auto (7 rows) didn't match
actual child count (5-6 rows), causing 1fr collapse to 3px.

Solution: Revert to flexbox (proven stable).
- .ks-page: display: grid → display: flex; flex-direction: column
- .ks-page__workspace: add flex: 1 (replaces 1fr grid expansion)
- All flex children have min-height: 0 (height propagation chain)

Result: ShadowRunQueue grid now expands to full viewport height.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/shared/ui/layouts/PageLayout.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/shared/ui/layouts/PageLayout.vue b/frontend/src/shared/ui/layouts/PageLayout.vue
index 42de8733..18dad88a 100644
--- a/frontend/src/shared/ui/layouts/PageLayout.vue
+++ b/frontend/src/shared/ui/layouts/PageLayout.vue
@@ -39,8 +39,8 @@ const showHelp = ref(false)
   </section>
 </template>
 <style scoped>
-/* Grid-based page layout: gap is automatically calculated and doesn't break flex: 1 height propagation */
-.ks-page { width: 100%; max-width: var(--ks-content-max); margin: 0 auto; height: 100%; flex: 1; display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: var(--ks-space-2); }
+/* Flex-based page layout with explicit workspace height binding */
+.ks-page { width: 100%; max-width: var(--ks-content-max); margin: 0 auto; height: 100%; flex: 1; display: flex; flex-direction: column; }
 .ks-page__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-4); flex-shrink: 0; min-height: 32px; border-bottom: 1px solid var(--ks-color-neutral-200); padding-bottom: var(--ks-space-2); }
 .ks-page__title-group { display: flex; flex-direction: column; gap: 2px; }
 .ks-page__breadcrumb { font-size: 11px; color: var(--ks-color-text-muted); line-height: 14px; }
@@ -107,7 +107,7 @@ const showHelp = ref(false)
   box-sizing: border-box;
   font-family: inherit;
 }
-.ks-page__workspace { min-width: 0; min-height: 0; display: grid; gap: var(--ks-space-4); }
+.ks-page__workspace { min-width: 0; min-height: 0; display: grid; gap: var(--ks-space-4); flex: 1; }
 .ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
 .ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; display: flex; flex-direction: column; flex: 1; }
 @media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }