From cd313ded653d5d8a6fd1e4f9e99c7f8f5bcf1ebe Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 00:46:17 +0900
Subject: [PATCH] fix(fe): eliminate page-level scroll via viewport-fit shell
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause (Part 2): Both KsAppShell and AppShellLayout used min-height: 100vh,
allowing flex containers to grow beyond viewport when content exceeded height.

Solution: Convert shell layouts from min-height: 100vh → height: 100vh (fixed).
Add min-height: 0 to intermediate flex containers (.ks-app-shell__container,
.ks-app-shell__main) for proper height propagation.

Changes:
- KsAppShell.vue: min-height: 100vh → height: 100vh
- KsAppShell.vue: add min-height: 0 to __container and __main
- AppShellLayout.vue: min-height: 100vh → height: 100vh (backup fix)

Tested: models-master now fits viewport perfectly, no page-level scroll.

Combined with previous PageLayout grid fix, all layout components now
follow single-screen principle: viewport-fit without overflow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/shared/shell/KsAppShell.vue          | 4 +++-
 frontend/src/shared/ui/layouts/AppShellLayout.vue | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/shared/shell/KsAppShell.vue b/frontend/src/shared/shell/KsAppShell.vue
index 0c4a7ec8..7cba2334 100644
--- a/frontend/src/shared/shell/KsAppShell.vue
+++ b/frontend/src/shared/shell/KsAppShell.vue
@@ -88,7 +88,7 @@ onMounted(() => {
 .ks-app-shell {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
   background-color: var(--color-background-primary);
   color: var(--color-text-primary);
 }
@@ -114,6 +114,7 @@ onMounted(() => {
   flex: 1;
   overflow: hidden;
   position: relative;
+  min-height: 0;
 }
 
 .ks-app-shell__main {
@@ -123,6 +124,7 @@ onMounted(() => {
   overflow: hidden;
   padding: var(--ks-space-3);
   max-width: 100%;
+  min-height: 0;
 }
 
 .ks-app-shell__main--collapsed {
diff --git a/frontend/src/shared/ui/layouts/AppShellLayout.vue b/frontend/src/shared/ui/layouts/AppShellLayout.vue
index 9fa3449d..d8977c28 100644
--- a/frontend/src/shared/ui/layouts/AppShellLayout.vue
+++ b/frontend/src/shared/ui/layouts/AppShellLayout.vue
@@ -16,7 +16,7 @@ const appVersion = import.meta.env.VITE_APP_VERSION ?? '0.1.0'
   </div>
 </template>
 <style scoped>
-.ks-shell { min-height: 100vh; display: grid; grid-template-columns: var(--ks-sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' 'nav main' 'footer footer'; }
+.ks-shell { height: 100vh; display: grid; grid-template-columns: var(--ks-sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' 'nav main' 'footer footer'; }
 .ks-shell__header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-4); padding: var(--ks-space-3) var(--ks-space-6); color: var(--ks-color-text-on-dark); background: var(--ks-color-neutral-950); }
 .ks-shell__header > div:first-child { display: grid; } .ks-shell__header small { color: #cbd5e1; }
 .ks-shell__boundary { padding: var(--ks-space-2) var(--ks-space-3); border: 1px solid #fbbf24; border-radius: var(--ks-radius-sm); color: #fef3c7; }