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

fix(fe): enforce single-screen viewport principle for ApprovalQueue

Browse Source 
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>
This commit is contained in:
김재현
2026-08-15 23:32:03 +09:00
parent a6659bc840
commit 8ea0bf4d99
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/approval/pages/ApprovalQueue.vue
+4 -1
View File
@@ -403,6 +403,8 @@ h3 {
display: grid; display: grid;
grid-template-columns: 350px 1fr; grid-template-columns: 350px 1fr;
gap: var(--spacing-5); gap: var(--spacing-5);
height: 100%;
min-height: 0;
} }
.request-list { .request-list {
@@ -489,7 +491,8 @@ h3 {
border-radius: var(--border-radius-lg); border-radius: var(--border-radius-lg);
padding: var(--spacing-4); padding: var(--spacing-4);
background: var(--color-background-secondary); background: var(--color-background-secondary);
max-height: 700px; height: 100%;
min-height: 0;
overflow-y: auto; overflow-y: auto;
} }
frontend/src/shared/ui/layouts/ReviewWorkbenchLayout.vue
+2 -2
View File
@@ -6,7 +6,7 @@
</div> </div>
</template> </template>
<style scoped> <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 { 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: calc(100vh - 220px); max-height: calc(100vh - 220px); padding: var(--ks-space-3); overflow-y: auto; } .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; } } @media (max-width: 1200px) { .ks-review-workbench { grid-template-columns: 1fr; } }
</style> </style>