From 4b047ecf11bf0277fa65ee16d9ca2eefdfe530e0 Mon Sep 17 00:00:00 2001
From: Mukul Kolpe <mukulkolpe45@gmail.com>
Date: Wed, 12 Jun 2024 00:49:01 +0530
Subject: [PATCH 1/2] fix: address components copy icon on small screens

---
 packages/nextjs/app/page.tsx                        | 2 +-
 packages/nextjs/components/scaffold-eth/Address.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 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..7757766f4 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}

From ce2ec12478732f8893f86aa41e497a94a37ec849 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 17 Jun 2024 11:48:38 +0530
Subject: [PATCH 2/2] add flex-shrink to both icons too

---
 packages/nextjs/components/scaffold-eth/Address.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index 7757766f4..f24b4597a 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -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>