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; } }