From 0845e58a49ab96d1d9d53cbb110068eccc294326 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 10 Apr 2026 23:51:47 +0530
Subject: [PATCH] refactor: increase initial expertise tag count and constrain
 tag container height in profile and professional components

---
 src/app/(user)/user/profiles/page.tsx    | 4 ++--
 src/components/home/TopProfessionals.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index 678c219..0b1d4ee 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -265,7 +265,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
   const truncatedDescription = description && description.length > maxDescLength
     ? description.slice(0, maxDescLength) + '...'
     : description || '';
-  const INITIAL_TAG_COUNT = 3;
+  const INITIAL_TAG_COUNT = 5;
 
   return (
     <div className="bg-white rounded-[20px] p-4 sm:p-5 flex flex-col sm:flex-row gap-4 sm:gap-5 shadow-[0px_10px_20px_rgba(217,217,217,0.5)] min-h-[280px]">
@@ -376,7 +376,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
         {expertiseTags.length > 0 && (
           <div className="mt-3">
             <p className="font-fractul font-bold text-[14px] text-[#00293d] mb-2">Expertise:</p>
-            <div className="flex flex-wrap gap-2 items-center">
+            <div className={`flex flex-wrap gap-2 items-center ${showAllTags ? '' : 'max-h-[72px] overflow-hidden'}`}>
               {(showAllTags ? expertiseTags : expertiseTags.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => (
                 <span
                   key={index}
diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx
index 00c3ff2..49f35c8 100644
--- a/src/components/home/TopProfessionals.tsx
+++ b/src/components/home/TopProfessionals.tsx
@@ -32,7 +32,7 @@ function ProfessionalCard({
   const [imgError, setImgError] = useState(false);
   const placeholder = '/assets/icons/user-placeholder-icon.svg';
   const isPlaceholder = imageUrl === placeholder;
-  const INITIAL_TAG_COUNT = 2;
+  const INITIAL_TAG_COUNT = 4;
 
   return (
       <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
@@ -112,7 +112,7 @@ 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 items-center">
+              <div className="flex flex-wrap gap-1.5 mt-2 items-center max-h-[54px] overflow-hidden">
                 {expertise.slice(0, INITIAL_TAG_COUNT).map((tag, index) => (
                   <span
                     key={index}