fix: address components copy icon on small screens (#864)

Co-authored-by: Shiv Bhonde <shivbhonde04@gmail.com>
scaffold-eth · Jun 17, 2024 · e23ab4d · e23ab4d
1 parent 96f6b8a
commit e23ab4d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -17,7 +17,7 @@ const Home: NextPage = () => {
             <span className="block text-2xl mb-2">Welcome to</span>
             <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
           </h1>
-          <div className="flex justify-center items-center space-x-2">
+          <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
             <p className="my-2 font-medium">Connected Address:</p>
             <Address address={connectedAddress} />
           </div>

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -91,7 +91,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   }
 
   return (
-    <div className="flex items-center">
+    <div className="flex items-center flex-shrink-0">
       <div className="flex-shrink-0">
         <BlockieAvatar
           address={checkSumAddress}
@@ -117,7 +117,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
       )}
       {addressCopied ? (
         <CheckCircleIcon
-          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+          className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
           aria-hidden="true"
         />
       ) : (
@@ -131,7 +131,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
           }}
         >
           <DocumentDuplicateIcon
-            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer"
+            className="ml-1.5 text-xl font-normal text-sky-600 h-5 w-5 cursor-pointer flex-shrink-0"
             aria-hidden="true"
           />
         </CopyToClipboard>