From c193f9fcb9a562cbf2b953cf7038f0f147d71e35 Mon Sep 17 00:00:00 2001
From: Giancarlo Buomprisco <giancarlopsk@gmail.com>
Date: Thu, 20 Feb 2025 07:35:16 +0700
Subject: [PATCH] Update image uploader styling with object-contain and border
 (#173)

* Update image uploader styling with object-contain and border
* Fix avatar aspect ratio
---
 .../features/accounts/src/components/account-selector.tsx  | 2 +-
 packages/ui/src/makerkit/image-uploader.tsx                | 7 ++++++-
 packages/ui/src/shadcn/avatar.tsx                          | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index 95c3776a6..acf096d81 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -86,7 +86,7 @@ export function AccountSelector({
     pictureUrl ? (
       <UserAvatar pictureUrl={pictureUrl} />
     ) : (
-      <PersonIcon className="h-5 min-h-5 w-5 min-w-5" />
+      <PersonIcon className="h-5 w-5" />
     );
 
   return (
diff --git a/packages/ui/src/makerkit/image-uploader.tsx b/packages/ui/src/makerkit/image-uploader.tsx
index dc25d6fac..3e619fadc 100644
--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -72,7 +72,12 @@ export function ImageUploader(
   return (
     <div className={'flex items-center space-x-4'}>
       <label className={'animate-in fade-in zoom-in-50 relative h-20 w-20'}>
-        <Image fill className={'h-20 w-20 rounded-full'} src={image} alt={''} />
+        <Image
+          fill
+          className={'h-20 w-20 rounded-full object-cover'}
+          src={image}
+          alt={''}
+        />
 
         <Input />
       </label>
diff --git a/packages/ui/src/shadcn/avatar.tsx b/packages/ui/src/shadcn/avatar.tsx
index 9be32d1e0..9a3192afd 100644
--- a/packages/ui/src/shadcn/avatar.tsx
+++ b/packages/ui/src/shadcn/avatar.tsx
@@ -23,7 +23,7 @@ const AvatarImage: React.FC<
   React.ComponentPropsWithRef<typeof AvatarPrimitive.Image>
 > = ({ className, ...props }) => (
   <AvatarPrimitive.Image
-    className={cn('aspect-square h-full w-full', className)}
+    className={cn('aspect-square h-full w-full object-cover', className)}
     {...props}
   />
 );