Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: increase initial expertise tag count and constrain tag container height in profile and professional components

Browse Source
This commit is contained in:
pradeepkumar
2026-04-10 23:51:47 +05:30
parent 6fff0de325
commit 0845e58a49
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(user)/user/profiles/page.tsx
View File

@@ -265,7 +265,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
const truncatedDescription = description && description.length > maxDescLength const truncatedDescription = description && description.length > maxDescLength
? description.slice(0, maxDescLength) + '...' ? description.slice(0, maxDescLength) + '...'
: description || ''; : description || '';
const INITIAL_TAG_COUNT = 3; const INITIAL_TAG_COUNT = 5;
return ( 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]"> <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 && ( {expertiseTags.length > 0 && (
<div className="mt-3"> <div className="mt-3">
<p className="font-fractul font-bold text-[14px] text-[#00293d] mb-2">Expertise:</p> <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) => ( {(showAllTags ? expertiseTags : expertiseTags.slice(0, INITIAL_TAG_COUNT)).map((tag, index) => (
<span <span
key={index} key={index}

4
src/components/home/TopProfessionals.tsx
View File

@@ -32,7 +32,7 @@ function ProfessionalCard({
const [imgError, setImgError] = useState(false); const [imgError, setImgError] = useState(false);
const placeholder = '/assets/icons/user-placeholder-icon.svg'; const placeholder = '/assets/icons/user-placeholder-icon.svg';
const isPlaceholder = imageUrl === placeholder; const isPlaceholder = imageUrl === placeholder;
const INITIAL_TAG_COUNT = 2; const INITIAL_TAG_COUNT = 4;
return ( return (
<div className="bg-white rounded-[15px] overflow-hidden shadow-[0px_4px_20px_rgba(0,0,0,0.08)] h-full flex flex-col"> <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]"> <p className="font-fractul font-bold text-[14px] leading-normal text-[#00293d]">
Expertise: Expertise:
</p> </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) => ( {expertise.slice(0, INITIAL_TAG_COUNT).map((tag, index) => (
<span <span
key={index} key={index}