From 437bc4dca71f57d19f6487db6a7d4be487f956f1 Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Tue, 31 Mar 2026 15:54:11 +0530
Subject: [PATCH] fix: use flex layout for full-height contributions list

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/Contributions.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/Contributions.vue b/frontend/src/pages/Contributions.vue
index 92ee62ae..b1643d3c 100644
--- a/frontend/src/pages/Contributions.vue
+++ b/frontend/src/pages/Contributions.vue
@@ -1,16 +1,16 @@
 <template>
-	<div class="flex flex-col gap-4 p-4 h-full">
-		<div class="flex items-center justify-between">
+	<div class="flex flex-col gap-4 p-4 h-full overflow-hidden">
+		<div class="flex items-center justify-between shrink-0">
 			<h2 class="text-xl font-semibold text-ink-gray-9">{{ __('Change Requests') }}</h2>
 		</div>
 
 		<Tabs v-model="activeTabIndex" :tabs="tabs">
 			<template #tab-panel="{ tab }">
-				<div v-if="tab.key === 'my'" class="pt-4">
-					<div v-if="myChangeRequests.list.loading && !myChangeRequests.data?.length" class="flex items-center justify-center h-[calc(100vh-280px)]">
+				<template v-if="tab.key === 'my'">
+					<div v-if="myChangeRequests.list.loading && !myChangeRequests.data?.length" class="flex items-center justify-center flex-1">
 						<LoadingIndicator class="size-8" />
 					</div>
-					<div v-else class="h-[calc(100vh-280px)] overflow-auto">
+					<div v-else class="flex-1 overflow-auto">
 						<ListView
 							:columns="myChangeRequestColumns"
 							:rows="myChangeRequests.data || []"
@@ -41,13 +41,13 @@
 							/>
 						</div>
 					</div>
-				</div>
+				</template>
 
-				<div v-else-if="tab.key === 'reviews'" class="pt-4">
-					<div v-if="pendingReviews.list.loading && !pendingReviews.data?.length" class="flex items-center justify-center h-[calc(100vh-280px)]">
+				<template v-else-if="tab.key === 'reviews'">
+					<div v-if="pendingReviews.list.loading && !pendingReviews.data?.length" class="flex items-center justify-center flex-1">
 						<LoadingIndicator class="size-8" />
 					</div>
-					<div v-else class="h-[calc(100vh-280px)] overflow-auto">
+					<div v-else class="flex-1 overflow-auto">
 						<ListView
 							:columns="reviewsColumns"
 							:rows="pendingReviews.data || []"
@@ -81,7 +81,7 @@
 							/>
 						</div>
 					</div>
-				</div>
+				</template>
 			</template>
 		</Tabs>
 	</div>