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

fix: improve ProfileCard layout responsiveness by adding flex-wrap and adjusting container constraints

Browse Source
This commit is contained in:
pradeepkumar
2026-04-21 13:28:19 +05:30
parent bff2eef378
commit cecbba7f3e
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/profile/ProfileCard.tsx
View File

@@ -89,8 +89,8 @@ export function ProfileCard({
return ( return (
<div className="bg-white rounded-[20px] pt-0 px-4 pb-4 lg:pt-0 lg:px-5 lg:pb-5"> <div className="bg-white rounded-[20px] pt-0 px-4 pb-4 lg:pt-0 lg:px-5 lg:pb-5">
{/* Name and Actions Row */} {/* Name and Actions Row */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4"> <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between lg:flex-wrap gap-4 mb-4">
<div className="text-center lg:text-left"> <div className="text-center lg:text-left min-w-0 flex-1">
<div className="flex items-center justify-center lg:justify-start gap-2 mb-1"> <div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-serif"> <h1 className="text-[18px] text-[#00293d] font-serif">
<span className="font-semibold">{firstName}</span>{' '} <span className="font-semibold">{firstName}</span>{' '}
@@ -157,7 +157,7 @@ export function ProfileCard({
</div> </div>
{/* Action Buttons */} {/* Action Buttons */}
<div className="flex items-center justify-center lg:justify-start gap-3"> <div className="flex flex-wrap items-center justify-center lg:justify-start gap-3 flex-shrink-0">
{/* Message button - only enabled when connected */} {/* Message button - only enabled when connected */}
{(showEditButton || connectionStatus === 'ACCEPTED') && ( {(showEditButton || connectionStatus === 'ACCEPTED') && (
messageHref ? ( messageHref ? (