From a5fb2fda4645b0e8d6c1a1a820c6d5e6916c27b8 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Thu, 19 Mar 2026 10:49:07 +0530
Subject: [PATCH] feat: Implement scrollable profile card container with sticky
 pagination.

---
 src/app/(user)/user/profiles/page.tsx | 56 ++++++++++++++-------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index 30114b4..f595293 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -770,35 +770,37 @@ function ProfilesPageContent() {
               </div>
             )}
 
-            {/* Profile Cards */}
+            {/* Profile Cards - scrollable container */}
             {!loading && !error && agents.length > 0 && (
-              <div className="space-y-4">
-                {agents.map((profile) => (
-                  <ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} />
-                ))}
-              </div>
-            )}
+              <div className="max-h-[calc(100vh-280px)] overflow-y-auto scroll-smooth pr-1 scrollbar-thin">
+                <div className="space-y-4">
+                  {agents.map((profile) => (
+                    <ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} />
+                  ))}
+                </div>
 
-            {/* Pagination */}
-            {!loading && !error && totalPages > 1 && (
-              <div className="flex justify-center items-center gap-2 mt-8 flex-wrap">
-                <button
-                  onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                  disabled={currentPage === 1}
-                  className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
-                >
-                  Previous
-                </button>
-                <span className="px-4 py-2 font-serif text-[13px] text-[#00293d]">
-                  Page {currentPage} of {totalPages}
-                </span>
-                <button
-                  onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-                  disabled={currentPage === totalPages}
-                  className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
-                >
-                  Next
-                </button>
+                {/* Pagination */}
+                {totalPages > 1 && (
+                  <div className="flex justify-center items-center gap-2 mt-6 pb-2 flex-wrap sticky bottom-0 bg-white/90 backdrop-blur-sm py-3 rounded-[10px]">
+                    <button
+                      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                      disabled={currentPage === 1}
+                      className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
+                    >
+                      Previous
+                    </button>
+                    <span className="px-4 py-2 font-serif text-[13px] text-[#00293d]">
+                      Page {currentPage} of {totalPages}
+                    </span>
+                    <button
+                      onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                      disabled={currentPage === totalPages}
+                      className="px-4 py-2 rounded-[10px] border border-[#00293d]/20 font-serif text-[13px] text-[#00293d] disabled:opacity-50 disabled:cursor-not-allowed hover:border-[#00293d]/40 transition-colors"
+                    >
+                      Next
+                    </button>
+                  </div>
+                )}
               </div>
             )}
           </div>