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

This commit is contained in:
pradeepkumar
2026-04-21 13:28:19 +05:30
parent bff2eef378
commit cecbba7f3e

View File

@@ -89,8 +89,8 @@ export function ProfileCard({
return (
<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 */}
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
<div className="text-center lg:text-left">
<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 min-w-0 flex-1">
<div className="flex items-center justify-center lg:justify-start gap-2 mb-1">
<h1 className="text-[18px] text-[#00293d] font-serif">
<span className="font-semibold">{firstName}</span>{' '}
@@ -157,7 +157,7 @@ export function ProfileCard({
</div>
{/* 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 */}
{(showEditButton || connectionStatus === 'ACCEPTED') && (
messageHref ? (