fix: added min height/width and object fit cover to avatar (#1058)

coinbase · Aug 15, 2024 · 701c176 · 701c176
1 parent c55a9c1
commit 701c176
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/afraid-tips-whisper.md b/.changeset/afraid-tips-whisper.md
@@ -0,0 +1,4 @@
+---
+"@coinbase/onchainkit": minor
+---
+**fix**: Modify `Avatar` component to handle images with varying height/width ratio. By @kirkas #1058
diff --git a/src/identity/components/Avatar.stories.tsx b/src/identity/components/Avatar.stories.tsx
@@ -73,7 +73,7 @@ export const WithBadge: Story = {
 
 export const Base: Story = {
  args: {
- address: '0xFd3d8ffE248173B710b4e24a7E75ac4424853503',
+ address: '0x8c8F1a1e1bFdb15E7ed562efc84e5A588E68aD73',
  chain: base,
  },
 };

diff --git a/src/identity/components/Avatar.tsx b/src/identity/components/Avatar.tsx
@@ -74,6 +74,7 @@ export function Avatar({
  {/* biome-ignore lint: alt gets assigned */}
  {displayAvatarImg ? (
  <img
+ className="min-h-full min-w-full object-cover"
  data-testid="ockAvatar_Image"
  loading="lazy"
  width="100%"