From e21c9b8b5edbfd711c112ea0ede1806ad4b8bcf0 Mon Sep 17 00:00:00 2001
From: Mukul Kolpe <mukulkolpe45@gmail.com>
Date: Mon, 17 Jun 2024 12:00:08 +0530
Subject: [PATCH] fix: address components copy icon on small screens (#864)

Co-authored-by: Shiv Bhonde <shivbhonde04@gmail.com>
---
 packages/nextjs/app/page.tsx                        | 2 +-
 packages/nextjs/components/scaffold-eth/Address.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index fcca994c5..b91c22fe8 100644
--- 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
index 2241edc89..f24b4597a 100644
--- 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>