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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user