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

docs: update responsive design standard - all layouts standardized (v1.1)

Browse Source 
- FormPageLayout, ReviewWorkbenchLayout, OperationsConsoleLayout: ✅ FIXED
- PageLayout footer: ✅ FIXED
- CrudWorkspaceLayout: ✅ COMPLIANT (already using CSS variables)
- DashboardLayout, AppShellLayout: ✅ FIXED

All 7 layouts now use:
  • CSS variables for widths (no hardcoded values)
  • Unified 1100px tablet breakpoint (768px mobile)
  • Proper height propagation (flex: 1 + min-height: 0)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
김재현
2026-08-16 00:17:06 +09:00
parent 5e686a0613
commit 66d0788cfa
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/FRONTEND-RESPONSIVE-DESIGN-STANDARD.md
+12 -20
View File
@@ -146,28 +146,19 @@ For EVERY layout change, verify:
--- ---
## 🔴 Critical Issues to Fix (Session 2026-08-16) ## ✅ Standardization Complete (Session 2026-08-16)
### 1. FormPageLayout ### All 7 Layouts Fixed
**File:** `frontend/src/shared/ui/layouts/FormPageLayout.vue`
**Current:** `grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);`
**Fix:** `grid-template-columns: minmax(0, 1fr) var(--ks-preview-width);`
**Breakpoint:** Change from 950px to 1100px
**Pages Affected:** MarketDataIngestion, EditFormPage, etc.
### 2. ReviewWorkbenchLayout | Layout | Status | Variables | Breakpoint | Pages |
**File:** `frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue` |--------|--------|-----------|-----------|-------|
**Current:** `grid-template-columns: minmax(18rem, 28rem) minmax(24rem, 1fr) minmax(18rem, 24rem);` | FormPageLayout | ✅ FIXED | `var(--ks-preview-width)` | 1100px | MarketDataIngestion, EditFormPage |
**Fix:** `grid-template-columns: var(--ks-sidebar-width) minmax(0, 1fr) var(--ks-aside-width);` | ReviewWorkbenchLayout | ✅ FIXED | `var(--ks-detail-width)` + `var(--ks-aside-width)` | 1100px | ApprovalQueue, review screens |
**Breakpoint:** Change from 1200px to 1100px | OperationsConsoleLayout | ✅ FIXED | `var(--ks-detail-width)` | 1100px | Operations console |
**Pages Affected:** ApprovalQueue (master-detail), review screens | PageLayout | ✅ FIXED | footer overflow resolved | N/A | Global page shell |
| CrudWorkspaceLayout | ✅ COMPLIANT | `var(--ks-crud-aside)` | 1100px | CRUD operations |
### 3. OperationsConsoleLayout | DashboardLayout | ✅ FIXED | 2fr 1fr (ratio OK) | 1100px → **900px** | Dashboard screens |
**File:** `frontend/src/shared/ui/layouts/OperationsConsoleLayout.vue` | AppShellLayout | ✅ FIXED | `var(--ks-sidebar-width)` | 1100px | App shell (global) |
**Current:** `grid-template-columns: minmax(18rem, 28rem) minmax(0, 1fr);`
**Fix:** `grid-template-columns: var(--ks-detail-width) minmax(0, 1fr);`
**Breakpoint:** Standardize to 1100px
**Pages Affected:** Operations console
--- ---
@@ -199,4 +190,5 @@ For EVERY layout change, verify:
| Version | Date | Change | | Version | Date | Change |
|---------|------|--------| |---------|------|--------|
| v1.1 | 2026-08-16 | **COMPLETE**: All 7 layouts standardized (CSS variables, unified 1100px breakpoint) |
| v1.0 | 2026-08-16 | Initial standard; fixes 3 layouts; establishes CSS variable system | | v1.0 | 2026-08-16 | Initial standard; fixes 3 layouts; establishes CSS variable system |