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

refactor(fe): ApprovalQueue - compact layout to eliminate scroll

Browse Source 
- 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>
This commit is contained in:
김재현
2026-08-16 01:15:12 +09:00
parent c1951dfa0e
commit 4d1bdb467e
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/approval/pages/ApprovalQueue.vue
+10 -10
View File
@@ -333,11 +333,11 @@ h2 {
} }
h3 { h3 {
margin: 0 0 var(--spacing-2) 0; margin: 0;
font-size: var(--font-size-base); font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
color: var(--color-text-primary); color: var(--color-text-primary);
padding-bottom: var(--spacing-2); padding-bottom: 6px;
border-bottom: var(--border-width-1) solid var(--color-border-secondary); border-bottom: var(--border-width-1) solid var(--color-border-secondary);
} }
@@ -508,8 +508,8 @@ h3 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--spacing-3); gap: var(--spacing-2);
padding: var(--spacing-4); padding: var(--spacing-3);
border-bottom: var(--border-width-1) solid var(--color-border-secondary); border-bottom: var(--border-width-1) solid var(--color-border-secondary);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -534,11 +534,11 @@ h3 {
.request-detail { .request-detail {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-4); gap: var(--spacing-2);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: var(--spacing-4); padding: var(--spacing-3);
} }
.section { .section {
@@ -556,7 +556,7 @@ h3 {
.detail-item { .detail-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-1); gap: 2px;
padding: var(--spacing-2) var(--spacing-3); padding: var(--spacing-2) var(--spacing-3);
background: var(--color-background-primary); background: var(--color-background-primary);
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
@@ -612,8 +612,8 @@ h3 {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
font-family: var(--font-sans); font-family: var(--font-sans);
resize: vertical; resize: vertical;
min-height: 80px; min-height: 60px;
max-height: 120px; max-height: 80px;
transition: all var(--transition-fast); transition: all var(--transition-fast);
} }