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

fix: set specialization cards to stretch height for consistent layout alignment

Browse Source
This commit is contained in:
pradeepkumar
2026-04-15 06:44:55 +05:30
parent ffa508f7cf
commit 8a7cbe6bbc
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/profile/SpecializationCard.tsx
View File

@@ -29,7 +29,7 @@ export function SpecializationCard({
}; };
return ( return (
<div className={`bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] ${isExpanded ? '' : 'min-h-[220px]'}`}> <div className={`bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625] ${isExpanded ? '' : 'min-h-[220px]'}`}>
<div className="flex justify-center mb-3">{icon}</div> <div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4> <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1"> <div className="flex-1">

4
src/components/profile/SpecializationSection.tsx
View File

@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Top row - up to 3 cards */} {/* Top row - up to 3 cards */}
{topRowFields.length > 0 && ( {topRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${ <div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${
topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' : topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' : topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3' 'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Bottom row - remaining cards */} {/* Bottom row - remaining cards */}
{bottomRowFields.length > 0 && ( {bottomRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-start gap-6 ${ <div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${
bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' : bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' : bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3' 'lg:grid-cols-3'