fix(fe): eliminate page-level scroll via viewport-fit shell layout

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>
This commit is contained in:
2026-08-16 00:46:17 +09:00
parent 1d0fdcc013
commit cd313ded65
2 changed files with 4 additions and 2 deletions
+3 -1
View File
@@ -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 {