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

fix(fe): revert PageLayout to flexbox - fix grid gap calculation issue

Browse Source 
Root cause: CSS Grid with optional (v-if) children caused inconsistent row counts.
Grid-template-rows: auto auto auto auto 1fr auto auto (7 rows) didn't match
actual child count (5-6 rows), causing 1fr collapse to 3px.

Solution: Revert to flexbox (proven stable).
- .ks-page: display: grid → display: flex; flex-direction: column
- .ks-page__workspace: add flex: 1 (replaces 1fr grid expansion)
- All flex children have min-height: 0 (height propagation chain)

Result: ShadowRunQueue grid now expands to full viewport height.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 00:54:19 +09:00
parent cd313ded65
commit bacde3f529
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/layouts/PageLayout.vue
+3 -3
View File
@@ -39,8 +39,8 @@ const showHelp = ref(false)
</section>
</template>
<style scoped>
/* Grid-based page layout: gap is automatically calculated and doesn't break flex: 1 height propagation */
.ks-page { width: 100%; max-width: var(--ks-content-max); margin: 0 auto; height: 100%; flex: 1; display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: var(--ks-space-2); }
/* Flex-based page layout with explicit workspace height binding */
.ks-page { width: 100%; max-width: var(--ks-content-max); margin: 0 auto; height: 100%; flex: 1; display: flex; flex-direction: column; }
.ks-page__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-4); flex-shrink: 0; min-height: 32px; border-bottom: 1px solid var(--ks-color-neutral-200); padding-bottom: var(--ks-space-2); }
.ks-page__title-group { display: flex; flex-direction: column; gap: 2px; }
.ks-page__breadcrumb { font-size: 11px; color: var(--ks-color-text-muted); line-height: 14px; }
@@ -107,7 +107,7 @@ const showHelp = ref(false)
box-sizing: border-box;
font-family: inherit;
}
.ks-page__workspace { min-width: 0; min-height: 0; display: grid; gap: var(--ks-space-4); }
.ks-page__workspace { min-width: 0; min-height: 0; display: grid; gap: var(--ks-space-4); flex: 1; }
.ks-page__workspace.has-aside { grid-template-columns: minmax(0, 1fr) var(--ks-aside-width); }
.ks-page__content, .ks-page__aside { min-width: 0; min-height: 0; display: flex; flex-direction: column; flex: 1; }
@media (max-width: 1100px) { .ks-page__workspace.has-aside { grid-template-columns: 1fr; } }