From 8ea0bf4d99caacd32e3d96d1125ac7447d823c75 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 23:32:03 +0900
Subject: [PATCH] fix(fe): enforce single-screen viewport principle for
 ApprovalQueue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PRINCIPLE: First load must fit within single viewport (no scroll required,
excluding dashboard summary section).

CHANGES:
1. ReviewWorkbenchLayout.vue
   - Changed: height: calc(100vh - 220px) → height: 100%
   - Reason: calc() was hardcoded to fixed pixels, not respecting parent flex layout
   - Added: min-height: 0 (critical for flex overflow behavior)

2. ApprovalQueue.vue (.content)
   - Added: height: 100% + min-height: 0

3. ApprovalQueue.vue (.detail-panel)
   - Removed: max-height: 700px (was hard limit, causing overflow)
   - Added: height: 100% + min-height: 0

RESULT: Page now fits single viewport without scroll.
Individual panels (list, detail) maintain internal scroll as needed.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/features/approval/pages/ApprovalQueue.vue   | 5 ++++-
 frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/approval/pages/ApprovalQueue.vue b/frontend/src/features/approval/pages/ApprovalQueue.vue
index 321f6d42..b072b6df 100644
--- a/frontend/src/features/approval/pages/ApprovalQueue.vue
+++ b/frontend/src/features/approval/pages/ApprovalQueue.vue
@@ -403,6 +403,8 @@ h3 {
   display: grid;
   grid-template-columns: 350px 1fr;
   gap: var(--spacing-5);
+  height: 100%;
+  min-height: 0;
 }
 
 .request-list {
@@ -489,7 +491,8 @@ h3 {
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-4);
   background: var(--color-background-secondary);
-  max-height: 700px;
+  height: 100%;
+  min-height: 0;
   overflow-y: auto;
 }
 
diff --git a/frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue b/frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue
index 2b370806..cd4cc966 100644
--- a/frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue
+++ b/frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue
@@ -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; }
-.ks-review-workbench > * { height: calc(100vh - 220px); max-height: calc(100vh - 220px); padding: var(--ks-space-3); overflow-y: auto; }
+.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 > * { height: 100%; min-height: 0; padding: var(--ks-space-3); overflow-y: auto; }
 @media (max-width: 1200px) { .ks-review-workbench { grid-template-columns: 1fr; } }
 </style>