kjh2064
ffc1f5b1b5
- 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>
9 lines
721 B
Vue
9 lines
721 B
Vue
<template>
|
|
<div class="ks-form-layout">
|
|
<form class="ks-form-layout__form ks-card" @submit.prevent="$emit('submit')"><slot /></form>
|
|
<aside v-if="$slots.preview" class="ks-form-layout__preview ks-card"><slot name="preview" /></aside>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">defineEmits<{ submit: [] }>()</script>
|
|
<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>
|