refactor: optimize profile tag display and truncate location text across professional components

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 = 6;
+  const INITIAL_TAG_COUNT = 3;
 
   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]">
@@ -334,7 +334,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
                 width={16}
                 height={15}
               />
-              <span className="font-serif font-bold text-[14px] text-[#00293d]">
+              <span className="font-serif font-bold text-[14px] text-[#00293d] truncate max-w-[200px]" title={location}>
                 {location}
               </span>
             </div>
@@ -376,11 +376,11 @@ 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 gap-2 items-center ${showAllTags ? 'flex-wrap' : 'flex-nowrap overflow-hidden'}`}>
               {(showAllTags ? expertiseTags : expertiseTags.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => (
                 <span
                   key={index}
-                  className="border border-[#00293d] rounded-[15px] px-3 py-1 font-serif text-[14px] text-[#00293d]"
+                  className="border border-[#00293d] rounded-[15px] px-3 py-1 font-serif text-[14px] text-[#00293d] whitespace-nowrap flex-shrink-0"
                 >
                   {tag}
                 </span>
@@ -388,7 +388,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
               {expertiseTags.length > INITIAL_TAG_COUNT && (
                 <button
                   onClick={() => setShowAllTags(!showAllTags)}
-                  className="border border-[#e58625] rounded-[15px] px-3 py-1 font-serif text-[14px] text-[#e58625] hover:bg-[#e58625]/10 transition-colors"
+                  className="border border-[#e58625] rounded-[15px] px-3 py-1 font-serif text-[14px] text-[#e58625] hover:bg-[#e58625]/10 transition-colors whitespace-nowrap flex-shrink-0"
                 >
                   {showAllTags ? 'Show Less' : `+${expertiseTags.length - INITIAL_TAG_COUNT} more`}
                 </button>

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 = 4;
+  const INITIAL_TAG_COUNT = 3;
 
   return (
       <div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col">
@@ -91,14 +91,15 @@ function ProfessionalCard({
               <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
                 Location:
               </p>
-              <div className="flex items-center gap-1.5 mt-1">
+              <div className="flex items-center gap-1.5 mt-1 min-w-0">
                 <Image
                   src="/assets/icons/location-pin-orange.svg"
                   alt="Location"
                   width={12}
                   height={15}
+                  className="flex-shrink-0"
                 />
-                <span className="font-serif font-normal text-[10px] leading-normal text-[#00293d]">
+                <span className="font-serif font-normal text-[10px] leading-normal text-[#00293d] truncate" title={location}>
                   {location}
                 </span>
               </div>
@@ -111,17 +112,17 @@ 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-nowrap overflow-hidden gap-1.5 mt-2 items-center">
                 {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]"
+                    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] whitespace-nowrap flex-shrink-0"
                   >
                     {tag}
                   </span>
                 ))}
                 {expertise.length > INITIAL_TAG_COUNT && (
-                  <span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%]">
+                  <span className="bg-[#e58625]/15 text-[#e58625] rounded-[15px] px-2 h-[24px] flex items-center justify-center font-serif font-semibold text-[12px] leading-[100%] whitespace-nowrap flex-shrink-0">
                     +{expertise.length - INITIAL_TAG_COUNT} more
                   </span>
                 )}