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

fix(fe): responsive design standardization - CSS variables and unified breakpoints

Browse Source 
- FormPageLayout: hardcoded minmax(18rem, 26rem) → var(--ks-preview-width)
- ReviewWorkbenchLayout: hardcoded minmax values → var(--ks-detail-width) + var(--ks-aside-width)
- OperationsConsoleLayout: hardcoded minmax(18rem, 28rem) → var(--ks-detail-width)
- Unified all breakpoints: 950px/1000px/1200px → 1100px (tablet), 768px (mobile)
- PageLayout: footer sticky overflow issue fixed (flex: 0 0 auto)

Fixes responsive design for all screen sizes (768px mobile → 1920px fullHD → 2560px 4K).
Reference: docs/FRONTEND-RESPONSIVE-DESIGN-STANDARD.md

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 00:12:21 +09:00
parent 4d45d8c7f0
commit ffc1f5b1b5
7 changed files with 276 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/ui/layouts/FormPageLayout.vue
+1 -1
View File
@@ -5,4 +5,4 @@
</div>
</template>
<script setup lang="ts">defineEmits<{ submit: [] }>()</script>
<style scoped>.ks-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: var(--ks-space-4); align-items: start; flex: 1; min-height: 0; height: 100%; } .ks-form-layout__form,.ks-form-layout__preview { padding: var(--ks-space-4); overflow-y: auto; min-height: 0; } @media (max-width: 950px) { .ks-form-layout { grid-template-columns: 1fr; } }</style>
<style scoped>.ks-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--ks-preview-width); gap: var(--ks-space-4); align-items: start; flex: 1; min-height: 0; height: 100%; } .ks-form-layout__form,.ks-form-layout__preview { padding: var(--ks-space-4); overflow-y: auto; min-height: 0; } @media (max-width: 1100px) { .ks-form-layout { grid-template-columns: 1fr; } }</style>
frontend/src/shared/ui/layouts/OperationsConsoleLayout.vue
+1 -1
View File
@@ -1,3 +1,3 @@
<script setup lang="ts">defineProps<{ title: string; runStatus?: string; watermark?: string; owner?: string }>()</script>
<template><section class="ks-ops-console"><header><div><h1>{{ title }}</h1><p>상태 {{ runStatus ?? '-' }} · Watermark {{ watermark ?? '-' }} · Owner {{ owner ?? '-' }}</p></div><slot name="actions" /></header><div class="ks-ops-console__grid"><aside><slot name="runs" /></aside><main><slot /></main></div><footer v-if="$slots.footer"><slot name="footer" /></footer></section></template>
<style scoped>.ks-ops-console{display:grid;gap:var(--ks-space-4)}header{display:flex;justify-content:space-between;gap:var(--ks-space-3)}h1{margin:0}.ks-ops-console__grid{display:grid;grid-template-columns:minmax(18rem,28rem) minmax(0,1fr);gap:var(--ks-space-4)}main,aside{min-width:0}@media(max-width:1000px){.ks-ops-console__grid{grid-template-columns:1fr}}</style>
<style scoped>.ks-ops-console{display:grid;gap:var(--ks-space-4)}header{display:flex;justify-content:space-between;gap:var(--ks-space-3)}h1{margin:0}.ks-ops-console__grid{display:grid;grid-template-columns:var(--ks-detail-width) minmax(0,1fr);gap:var(--ks-space-4)}main,aside{min-width:0}@media(max-width:1100px){.ks-ops-console__grid{grid-template-columns:1fr}}</style>
frontend/src/shared/ui/layouts/PageLayout.vue
+1 -1
View File
@@ -109,6 +109,6 @@ const showHelp = ref(false)
.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; 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%); }
.ks-page__footer { flex: 0 0 auto; 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>
frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue
+2 -2
View File
@@ -6,7 +6,7 @@
</div>
</template>
<style scoped>
.ks-review-workbench { display: grid; grid-template-columns: minmax(18rem, 28rem) minmax(24rem, 1fr) minmax(18rem, 24rem); gap: var(--ks-space-3); align-items: start; height: 100%; min-height: 0; }
.ks-review-workbench { display: grid; grid-template-columns: var(--ks-detail-width) minmax(0, 1fr) var(--ks-aside-width); gap: var(--ks-space-3); align-items: start; height: 100%; min-height: 0; }
.ks-review-workbench > * { height: 100%; min-height: 0; padding: var(--ks-space-3); overflow-y: auto; }
@media (max-width: 1200px) { .ks-review-workbench { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .ks-review-workbench { grid-template-columns: 1fr; } }
</style>