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

fix(fe): structural flex layout fix for 100% viewport height zero-scroll fit

Browse Source
This commit is contained in:
김재현
2026-08-15 21:24:28 +09:00
parent c1d818bce7
commit 6483757ba0
4 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/layouts/PageLayout.vue
+6 -6
View File
@@ -17,15 +17,15 @@ defineProps<{ title: string; subtitle?: string; status?: string; asOf?: string;
</section>
</template>
<style scoped>
.ks-page { max-width: var(--ks-content-max); margin: 0 auto; display: grid; gap: var(--ks-space-4); }
.ks-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); }
.ks-page { max-width: var(--ks-content-max); margin: 0 auto; height: 100%; display: flex; flex-direction: column; gap: var(--ks-space-2); }
.ks-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ks-space-4); flex-shrink: 0; }
h1 { margin: 0; font-size: var(--ks-font-page); line-height: var(--ks-line-page); } p { margin: var(--ks-space-1) 0 0; color: var(--ks-color-neutral-600); }
.ks-page__meta { display: flex; gap: var(--ks-space-3); flex-wrap: wrap; margin-top: var(--ks-space-2); color: var(--ks-color-neutral-600); font-size: var(--ks-font-caption); }
.ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); }
.ks-page__filters { padding: var(--ks-space-3); }
.ks-page__workspace { min-width: 0; display: grid; gap: var(--ks-space-4); }
.ks-page__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ks-space-3); flex-shrink: 0; }
.ks-page__filters { padding: var(--ks-space-2) var(--ks-space-3); flex-shrink: 0; }
.ks-page__workspace { min-width: 0; flex: 1; display: grid; min-height: 0; gap: var(--ks-space-4); }
.ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
.ks-page__content, .ks-page__aside { min-width: 0; }
.ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; }
.ks-page__footer { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--ks-space-2); padding: var(--ks-space-3); border: 1px solid var(--ks-color-neutral-200); background: rgb(255 255 255 / 96%); }
@media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }
</style>