fix: css WalletDropdown hover bug (#1156)

Author: cpcramer

.changeset/chatty-coins-sort.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **chore**: Remove the bottom WalletDropdown padding and instead apply the bottom padding directly on the WalletDropdownDisconnect component. This fixes a bug where the WalletDropdown bottom padding would unintentionally change on:hover. @cpcramer #1156

src/wallet/components/WalletDropdown.tsx

@@ -38,7 +38,7 @@ export function WalletDropdown({ children, className }: WalletDropdownReact) {
     <div
       className={cn(
         pressable.default,
-        'absolute right-0 z-10 mt-1 flex w-max min-w-[250px] flex-col overflow-hidden rounded-xl pb-2',
+        'absolute right-0 z-10 mt-1 flex w-max min-w-[250px] flex-col overflow-hidden rounded-xl',
         className,
       )}
       data-testid="ockWalletDropdown"

src/wallet/components/WalletDropdownDisconnect.tsx

@@ -19,12 +19,12 @@ export function WalletDropdownDisconnect({
       type="button"
       className={cn(
         pressable.default,
-        'relative flex items-center px-4 py-3',
+        'relative flex items-center px-4 pt-3 pb-4',
         className,
       )}
       onClick={handleDisconnect}
     >
-      <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-[1.125rem] w-[1.125rem] items-center justify-center">
+      <div className="absolute left-4 flex h-[1.125rem] w-[1.125rem] items-center justify-center">
         {disconnectSvg}
       </div>
       <span className={cn(dsText.body, 'pl-6')}>{text}</span>