From b19991ed7ba1a424a3ec798fe5a06b9dbd34d2b8 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Thu, 19 Mar 2026 18:18:44 +0530
Subject: [PATCH] refactor: adjust profile page layout by removing scrollable
 profile cards and updating header navigation positioning.

---
 src/app/(user)/user/profiles/page.tsx    | 14 +++++++-------
 src/components/home/TopProfessionals.tsx | 18 ++++++++++++++----
 src/components/layout/CommonHeader.tsx   |  6 +++---
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index 221a4f8..cb47e69 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -610,8 +610,8 @@ function ProfilesPageContent() {
     <div className="min-h-screen bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div className="flex gap-6">
-          {/* Left Sidebar - hidden on mobile */}
-          <div className="hidden lg:block w-[220px] flex-shrink-0">
+          {/* Left Sidebar - hidden on mobile, sticky */}
+          <div className="hidden lg:block w-[220px] flex-shrink-0 self-start sticky top-6 max-h-[calc(100vh-48px)] overflow-y-auto scrollbar-thin">
             {/* Listing Type */}
             <div className="mb-6">
               <h2 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">Listing Type</h2>
@@ -772,18 +772,18 @@ function ProfilesPageContent() {
               </div>
             )}
 
-            {/* Profile Cards - scrollable container */}
+            {/* Profile Cards - nested scroll matching filter sidebar height */}
             {!loading && !error && agents.length > 0 && (
-              <div className="max-h-[calc(100vh-280px)] overflow-y-auto scroll-smooth pr-1 scrollbar-thin">
-                <div className="space-y-4">
+              <div className="overflow-y-auto scroll-smooth scrollbar-thin" style={{ maxHeight: 'calc(100vh - 220px)' }}>
+                <div className="space-y-4 pb-4">
                   {agents.map((profile) => (
                     <ProfileCard key={profile.id} profile={profile} resolvedAvatarUrl={avatarUrls[profile.id]} />
                   ))}
                 </div>
 
-                {/* Pagination */}
+                {/* Pagination - sticky at bottom of scroll area */}
                 {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]">
+                  <div className="flex justify-center items-center gap-2 py-3 flex-wrap sticky bottom-0 bg-white/95 backdrop-blur-sm">
                     <button
                       onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                       disabled={currentPage === 1}
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index cdc69a8..33ae876 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -32,12 +32,14 @@ function ProfessionalCard({
 }: ProfessionalCardProps) {
   const starCount = rating ? Math.round(rating) : 0;
   const [imgLoaded, setImgLoaded] = useState(false);
+  const [showAllTags, setShowAllTags] = useState(false);
   const placeholder = '/assets/icons/user-placeholder-icon.svg';
   const isPlaceholder = imageUrl === placeholder;
+  const INITIAL_TAG_COUNT = 4;
 
   return (
     <Link href={profileLink}>
-      <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_rgba(0,0,0,0.12)] transition-shadow cursor-pointer">
+      <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_rgba(0,0,0,0.12)] transition-shadow cursor-pointer h-full flex flex-col">
         {/* Image */}
         <div className="relative h-[226px] w-full overflow-hidden bg-gray-100">
           {!imgLoaded && !isPlaceholder && (
@@ -54,7 +56,7 @@ function ProfessionalCard({
         </div>
 
         {/* Content */}
-        <div className="p-4">
+        <div className="p-4 flex-1 flex flex-col">
           {/* Name */}
           <h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
             {name}
@@ -106,8 +108,8 @@ function ProfessionalCard({
               <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
                 Expertise:
               </p>
-              <div className="flex flex-wrap gap-1.5 mt-2">
-                {expertise.slice(0, 6).map((tag, index) => (
+              <div className="flex flex-wrap gap-1.5 mt-2 items-center">
+                {(showAllTags ? expertise : expertise.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => (
                   <span
                     key={index}
                     className="border-[0.7px] border-[#00293d] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#00293d]"
@@ -115,6 +117,14 @@ function ProfessionalCard({
                     {tag}
                   </span>
                 ))}
+                {expertise.length > INITIAL_TAG_COUNT && (
+                  <button
+                    onClick={(e) => { e.preventDefault(); e.stopPropagation(); setShowAllTags(!showAllTags); }}
+                    className="border-[0.7px] border-[#e58625] rounded-[15px] px-[5px] h-[24px] flex items-center justify-center font-serif font-normal text-[13px] leading-[100%] text-[#e58625] hover:bg-[#e58625]/10 transition-colors"
+                  >
+                    {showAllTags ? 'Show Less' : `+${expertise.length - INITIAL_TAG_COUNT} more`}
+                  </button>
+                )}
               </div>
             </div>
           )}
diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
index 00ff71d..068ed8c 100644
--- a/src/components/layout/CommonHeader.tsx
+++ b/src/components/layout/CommonHeader.tsx
@@ -57,7 +57,7 @@ export function CommonHeader() {
 
   return (
     <header className="bg-[#648188] rounded-[20px] px-4 md:px-8 relative" ref={mobileMenuRef}>
-      <div className="flex items-center h-[60px] md:h-[70px]">
+      <div className="flex justify-between items-center h-[60px] md:h-[70px]">
         {/* Logo */}
         <Link href={dashboardLink} className="flex-shrink-0">
           <Image
@@ -70,8 +70,8 @@ export function CommonHeader() {
           />
         </Link>
 
-        {/* Navigation - Desktop only (centered) */}
-        <nav className="hidden md:flex items-center gap-8 flex-1 justify-center">
+        {/* Navigation - Desktop only */}
+        <nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
           {navLinks.map((link) => (
             <Link
               key={link.href}