Fix RainbowKitCustomConnectButton dropdown styles (#500)

scaffold-eth · Aug 23, 2023 · 02dd022 · 02dd022
1 parent 1aeb442
commit 02dd022
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -91,21 +91,24 @@ export const RainbowKitCustomConnectButton = () => {
                       {chain.name}
                     </span>
                   </div>
-                  <div className="dropdown dropdown-end">
-                    <label tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0">
+                  <div className="dropdown dropdown-end leading-3">
+                    <label
+                      tabIndex={0}
+                      className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
+                    >
                       <BlockieAvatar address={account.address} size={24} ensImage={account.ensAvatar} />
                       <span className="ml-2 mr-1">{account.displayName}</span>
                       <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
                     </label>
                     <ul
                       tabIndex={0}
-                      className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+                      className="dropdown-content menu z-[2] p-2 mt-2 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
                     >
                       <li>
                         {addressCopied ? (
                           <div className="btn-sm !rounded-xl flex gap-3 py-3">
                             <CheckCircleIcon
-                              className=" text-xl font-normal h-6 w-4 cursor-pointer"
+                              className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
                               aria-hidden="true"
                             />
                             <span className=" whitespace-nowrap">Copy address</span>
@@ -122,7 +125,7 @@ export const RainbowKitCustomConnectButton = () => {
                           >
                             <div className="btn-sm !rounded-xl flex gap-3 py-3">
                               <DocumentDuplicateIcon
-                                className=" text-xl font-normal h-6 w-4 cursor-pointer"
+                                className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
                                 aria-hidden="true"
                               />
                               <span className=" whitespace-nowrap">Copy address</span>