From 4d1bdb467e7a6d88b5f3da1d508404309eb1dd61 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 01:15:12 +0900
Subject: [PATCH] refactor(fe): ApprovalQueue - compact layout to eliminate
 scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce .request-detail gap: var(--spacing-4) → var(--spacing-2)
- Reduce .request-detail padding: var(--spacing-4) → var(--spacing-3)
- Reduce textarea height: 80-120px → 60-80px
- Reduce .detail-header padding and gap for compact header
- Reduce h3 font-size and margin for section headers
- Reduce .detail-item gap for tight item spacing

Result: All content (Request Details, Validation Metrics, Review Comment) fits in viewport without internal scroll

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../features/approval/pages/ApprovalQueue.vue | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/features/approval/pages/ApprovalQueue.vue b/frontend/src/features/approval/pages/ApprovalQueue.vue
index e5399fe5..760b1ff8 100644
--- a/frontend/src/features/approval/pages/ApprovalQueue.vue
+++ b/frontend/src/features/approval/pages/ApprovalQueue.vue
@@ -333,11 +333,11 @@ h2 {
 }
 
 h3 {
-  margin: 0 0 var(--spacing-2) 0;
-  font-size: var(--font-size-base);
+  margin: 0;
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
-  padding-bottom: var(--spacing-2);
+  padding-bottom: 6px;
   border-bottom: var(--border-width-1) solid var(--color-border-secondary);
 }
 
@@ -508,8 +508,8 @@ h3 {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4);
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
   border-bottom: var(--border-width-1) solid var(--color-border-secondary);
   flex-shrink: 0;
 }
@@ -534,11 +534,11 @@ h3 {
 .request-detail {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-2);
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: var(--spacing-4);
+  padding: var(--spacing-3);
 }
 
 .section {
@@ -556,7 +556,7 @@ h3 {
 .detail-item {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: 2px;
   padding: var(--spacing-2) var(--spacing-3);
   background: var(--color-background-primary);
   border-radius: var(--border-radius-base);
@@ -612,8 +612,8 @@ h3 {
   font-size: var(--font-size-sm);
   font-family: var(--font-sans);
   resize: vertical;
-  min-height: 80px;
-  max-height: 120px;
+  min-height: 60px;
+  max-height: 80px;
   transition: all var(--transition-fast);
 }