From 935c747cd18f9b51fa9cda33f9f6dd1aaddf6b30 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Wed, 8 Apr 2026 03:46:15 +0530
Subject: [PATCH] style: update profile image object positioning and fix
 checkbox alignment in filter modal

---
 src/app/(user)/user/profiles/page.tsx   | 4 ++--
 src/components/profiles/FilterModal.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx
index 1502fad..4088d20 100644
--- a/src/app/(user)/user/profiles/page.tsx
+++ b/src/app/(user)/user/profiles/page.tsx
@@ -76,7 +76,7 @@ function ProfileImage({ src, alt, className }: { src: string | null; alt: string
           ref={(el) => { if (el?.complete) setStatus(el.naturalWidth > 0 ? 'loaded' : 'error'); }}
           src={src}
           alt={alt}
-          className={`w-full h-full object-cover transition-opacity duration-300 ${status === 'loaded' ? 'opacity-100' : 'opacity-0'}`}
+          className={`w-full h-full object-cover object-top transition-opacity duration-300 ${status === 'loaded' ? 'opacity-100' : 'opacity-0'}`}
           onLoad={() => setStatus('loaded')}
           onError={() => setStatus('error')}
         />
@@ -274,7 +274,7 @@ function ProfileCard({ profile, resolvedAvatarUrl }: ProfileCardProps) {
         <ProfileImage
           src={getProfileImageUrl()}
           alt={`${profile.firstName} ${profile.lastName}`}
-          className="w-full sm:w-[200px] h-[200px] rounded-[15px]"
+          className="w-full aspect-square sm:w-[200px] sm:h-[200px] sm:aspect-auto rounded-[15px]"
         />
         <Link href={`/user/profile/${profile.id}`} className="mt-4">
           <button className="w-[113px] py-2.5 bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-[14px] rounded-[15px] transition-colors text-center flex items-center justify-center">
diff --git a/src/components/profiles/FilterModal.tsx b/src/components/profiles/FilterModal.tsx
index 2a2f967..2dd8f0f 100644
--- a/src/components/profiles/FilterModal.tsx
+++ b/src/components/profiles/FilterModal.tsx
@@ -78,14 +78,14 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
                 {expandedSections[field.slug] && (
                   <div className={`grid ${field.options.length > 6 ? 'grid-cols-3' : 'grid-cols-3'} gap-x-6 gap-y-3`}>
                     {field.options.map((option) => (
-                      <label key={option.value} className="flex items-center gap-2 cursor-pointer">
+                      <label key={option.value} className="flex items-start gap-2 cursor-pointer">
                         <input
                           type="checkbox"
                           checked={(filters[field.slug] || []).includes(option.value)}
                           onChange={() => onToggleFilter(field.slug, option.value)}
-                          className="w-[17px] h-[17px] rounded-[5px] border-2 border-[#00293d]/30 appearance-none cursor-pointer checked:bg-[#e58625] checked:border-[#e58625] checked:bg-[url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%22%2F%3E%3C%2Fsvg%3E')] checked:bg-center checked:bg-no-repeat focus:ring-2 focus:ring-[#e58625]/50"
+                          className="flex-shrink-0 w-[17px] h-[17px] mt-[3px] rounded-[5px] border-2 border-[#00293d]/30 appearance-none cursor-pointer checked:bg-[#e58625] checked:border-[#e58625] checked:bg-[url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%22%2F%3E%3C%2Fsvg%3E')] checked:bg-center checked:bg-no-repeat focus:ring-2 focus:ring-[#e58625]/50"
                         />
-                        <span className="font-serif text-[15px] text-[#00293d]">{option.label}</span>
+                        <span className="font-serif text-[15px] text-[#00293d] leading-[1.4]">{option.label}</span>
                       </label>
                     ))}
                   </div>