refactor: Update Avatar component to use max-w-full for image width

softstack · May 23, 2024 · b91d91d · b91d91d
1 parent f713de2
commit b91d91d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -280,11 +280,14 @@ function App() {
                         <div className="flex flex-col bg-white pt-4 px-8 pb-2 min-h-fit gap-2 rounded-t-3xl rounded-b-xl shadow-custom-white">
                             <h2 className="headline">HORRAY!</h2>
                             <div className="text-xs break-all font-semibold text-center text-customGrayAddress">
-                                <p className="my-0 mx-auto">{account}</p>
+                                <p className="my-0 mx-auto">
+                                    {account ||
+                                        '0xcccodoiuwqbqjßq21jruß2rß120j'}
+                                </p>
                             </div>
                             <div className="flex justify-center items-center max-w-10 my-0 mx-auto">
                                 <img
-                                    className="max-h-full max-w-full"
+                                    className="h-auto max-w-full"
                                     src={etherIcon}
                                     alt=""
                                 />

diff --git a/src/components/utils/Avatar.tsx b/src/components/utils/Avatar.tsx
@@ -6,8 +6,12 @@ type Props = {
 
 const Avatar: React.FC<Props> = ({ src }) => {
     return (
-        <div className="flex flex-grow items-center justify-center overflow-hidden max-h-96 py-4 px-8">
-            <img className="max-h-80 w-auto object-contain" src={src} alt="" />
+        <div className="flex flex-grow items-center justify-center overflow-hidden max-h-96 py-2 px-8">
+            <img
+                className="h-auto max-w-full object-contain"
+                src={src}
+                alt=""
+            />
         </div>
     );
 };