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

- 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>

AGENTS.md

@@ -234,6 +234,75 @@ pnpm dev
 
 **URL:** http://localhost:5174
 
+### Frontend Layout & Responsive Design Standards (v16.0)
+
+**CRITICAL:** Responsive web design is MANDATORY for all layouts, not optional.
+
+#### CSS Variable Standards (base.css)
+```css
+:root {
+  --ks-sidebar-width: 16rem;       /* Navigation sidebars */
+  --ks-aside-width: 22rem;         /* Side panels */
+  --ks-preview-width: 24rem;       /* Preview/summary panels */
+  --ks-detail-width: 28rem;        /* Detail panels */
+  --ks-content-max: 1400px;        /* Max content width (prevent excessive expansion) */
+}
+```
+
+#### Layout Rules (Non-Negotiable)
+1. **NO hardcoded pixel/rem widths in minmax.** Always use CSS variables: `minmax(0, 1fr) var(--ks-aside-width)` ✅, NOT `minmax(18rem, 26rem)` ❌
+2. **Unified breakpoints (all layouts must use same):**
+   - **Desktop:** Default (no constraint)
+   - **Tablet:** `@media (max-width: 1100px) { grid-template-columns: 1fr; }` (2-col → 1-col)
+   - **Mobile:** `@media (max-width: 768px) { /* adjust padding, font sizes */ }`
+3. **All flex children:** `flex: 1; min-height: 0;` required (prevents overflow squashing)
+4. **Scrollable containers:** `overflow-y: auto; min-height: 0;` (enables internal scroll without page scroll)
+5. **Grid layouts:** `align-items: start;` (NOT center/stretch) to prevent column stretching at different heights
+6. **Max-width constraint:** Wrap pages in `.page-wrapper { max-width: var(--ks-content-max); margin: 0 auto; }` to prevent 2560px+ distortion
+
+#### Height Propagation Chain (Single-Screen Principle)
+```
+PageLayout (.ks-page__content)
+  ├─ height: 100%; min-height: 0; display: flex;
+  ↓
+QueryStateBoundary (.ks-query-boundary)
+  ├─ flex: 1; height: 100%; min-height: 0; display: flex;
+  ↓
+Content Container (KsSplitter, .ks-stack, FormPageLayout)
+  ├─ flex: 1; min-height: 0; height: 100%;
+  ├─ display: flex/grid;
+  ↓
+Internal Panes (.request-list, .detail-panel, .items)
+  ├─ flex: 1; min-height: 0; overflow-y: auto;
+```
+
+#### Banned Patterns
+- ❌ `grid-template-columns: minmax(18rem, 26rem)` (hardcoded min/max)
+- ❌ `calc(100vh - Xpx)` (brittle, changes with header size)
+- ❌ `max-width: 600px` on full-page containers (prevents responsiveness)
+- ❌ `align-items: center` in grid layouts (prevents height-based alignment)
+- ❌ `position: fixed` sidebars without mobile fallback
+- ❌ Multiple different breakpoints across layouts (950px, 900px, 1000px, 1200px all mixed)
+
+#### Verification Checklist
+For every layout change:
+- [ ] Uses CSS variables, not hardcoded rem/px
+- [ ] Breakpoints are 1100px (tablet) and 768px (mobile)
+- [ ] All flex children have `flex: 1; min-height: 0`
+- [ ] All scrollable panes have `overflow-y: auto; min-height: 0`
+- [ ] Tested at 768px (mobile), 1100px (tablet breakpoint), 1512px (current test), 1920px (fullHD), 2560px (4K)
+- [ ] No page-level scroll on first load (only internal pane scroll if needed)
+- [ ] Content max-width prevents distortion on ultra-wide (>1400px)
+
+#### Affected Layouts (Status)
+| Layout | Issue | Status | Reason |
+|--------|-------|--------|--------|
+| PageLayout | None | ✅ COMPLIANT | Uses CSS variables |
+| CrudWorkspaceLayout | None | ✅ COMPLIANT | Uses CSS variables |
+| FormPageLayout | Hardcoded `minmax(18rem, 26rem)` | 🔴 FIX REQUIRED | Session 2026-08-16 |
+| ReviewWorkbenchLayout | Mixed hardcoded widths | 🔴 FIX REQUIRED | Session 2026-08-16 |
+| OperationsConsoleLayout | Hardcoded `minmax(18rem, 28rem)` | 🔴 FIX REQUIRED | Session 2026-08-16 |
+
 ### Authentication for Testing
 
 Development mode uses `DevelopmentHeaderAuthenticationHandler`. Test requests with: