From 510be22cb6ffa0933a6ab2b5060d107a06ca348b Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Mon, 18 Nov 2024 20:03:02 +0000
Subject: [PATCH] [SDK] Fix: Wallet avatar styles in ConnectButton and Modal
 (#5422)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

i just want my cat back

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the styling of the `img` elements in the `DetailsModal` component to ensure they maintain aspect ratio and are responsive.

### Detailed summary
- Changed the `width` of the first `img` to `"100%"` and added `objectFit: "cover"`.
- Updated the second `img` to have `height` and `width` set to `"100%"`, along with `objectFit: "cover"`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../thirdweb/src/react/web/ui/ConnectWallet/Details.tsx   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
index 7b35e2afeed..e3e1887afda 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -224,8 +224,9 @@ export const ConnectedWalletDetails: React.FC<{
             alt=""
             src={avatarSrc}
             style={{
-              width: "100%",
               height: "100%",
+              width: "100%",
+              objectFit: "cover",
             }}
           />
         ) : (
@@ -410,8 +411,9 @@ function DetailsModal(props: {
           <img
             src={avatarSrc}
             style={{
-              width: iconSize.xxl,
-              height: iconSize.xxl,
+              height: "100%",
+              width: "100%",
+              objectFit: "cover",
             }}
             alt=""
           />