From 1d0fdcc0132950d95f8d95323f5ee36cd0ec9755 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sun, 16 Aug 2026 00:41:30 +0900 Subject: [PATCH] fix(fe): PageLayout grid-based layout - eliminate flex gap height calculation error MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: PageLayout's flex-direction: column + gap was not counted in flex: 1 height calculations, causing children to overflow and trigger scroll. Solution: Convert PageLayout from flexbox to CSS Grid with explicit grid-template-rows. Grid automatically accounts for gaps in row sizing. Changes: - PageLayout.vue: display: flex → display: grid - grid-template-rows: auto auto auto auto 1fr auto auto - .ks-page__content/.ks-page__aside: height: 100% → flex: 1 - .ks-page__workspace: removed flex: 1 (grid cell, not flex) Impact: - models-master fits viewport without page-level scroll ✓ - All screen-types layouts auto-fit with correct height propagation - Fix applies to all pages using PageLayout AGENTS.md v16.0: Added Layout Rule #7 (PageLayout grid requirement) Co-Authored-By: Claude Haiku 4.5 --- AGENTS.md | 5 ++ frontend/src/shared/ui/layouts/PageLayout.vue | 49 ++++++++++--------- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 3a19f167..670e01a2 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -259,6 +259,11 @@ pnpm dev 4. **Scrollable containers:** `overflow-y: auto; min-height: 0;` (enables internal scroll without page scroll) 5. **Grid layouts:** `align-items: start;` (NOT center/stretch) to prevent column stretching at different heights 6. **Max-width constraint:** Wrap pages in `.page-wrapper { max-width: var(--ks-content-max); margin: 0 auto; }` to prevent 2560px+ distortion +7. **PageLayout must use CSS Grid (NOT flexbox).** Flex + gap breaks `flex: 1` height propagation in children: + - ❌ **DON'T:** `display: flex; flex-direction: column; gap: var(--ks-space-2);` (gap is not counted in flex: 1 calculations) + - ✅ **DO:** `display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: var(--ks-space-2);` (gap auto-calculated) + - **Reason:** Grid gap is accounted for in row sizing; flex gap is invisible to flex: 1 child height calculations, causing overflow → unwanted scroll + - **Template rows:** header (auto) | subtitle (auto) | commandBar (auto) | summary (auto) | filters (auto) | workspace (1fr) | footer (auto) #### Page Structure Rule: NO Footers (Global or Page-Level) **CRITICAL:** Footers are EXCLUDED at all levels: diff --git a/frontend/src/shared/ui/layouts/PageLayout.vue b/frontend/src/shared/ui/layouts/PageLayout.vue index 6896825e..42de8733 100644 --- a/frontend/src/shared/ui/layouts/PageLayout.vue +++ b/frontend/src/shared/ui/layouts/PageLayout.vue @@ -39,7 +39,8 @@ const showHelp = ref(false)