kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/shell/KsAppShell.vue
+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 {
frontend/src/shared/ui/layouts/AppShellLayout.vue
+1 -1
View File
@@ -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; }