Earn app wallet connect on mobile fix

OasisDEX · Nov 14, 2024 · f1682a7 · f1682a7
1 parent 993cca9
commit f1682a7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/apps/earn-protocol/components/molecules/WalletLabel/WalletLabel.module.scss b/apps/earn-protocol/components/molecules/WalletLabel/WalletLabel.module.scss
@@ -0,0 +1,7 @@
+.wrapper {
+  width: 100%;
+
+  @media screen and (min-width: 768px) {
+    width: auto;
+  }
+}
diff --git a/apps/earn-protocol/components/molecules/WalletLabel/WalletLabel.tsx b/apps/earn-protocol/components/molecules/WalletLabel/WalletLabel.tsx
@@ -2,6 +2,8 @@ import { useAuthModal, useLogout, useSignerStatus, useUser } from '@account-kit/
 import { Button, LoadableAvatar, SkeletonLine, Text } from '@summerfi/app-earn-ui'
 import { formatAddress } from '@summerfi/app-utils'
 
+import classNames from './WalletLabel.module.scss'
+
 export default function WalletLabel() {
   const user = useUser()
   const { openAuthModal, isOpen: isAuthModalOpen } = useAuthModal()
@@ -29,6 +31,7 @@ export default function WalletLabel() {
         style={{
           padding: '0 var(--general-space-12) 0 6px',
         }}
+        className={classNames.wrapper}
       >
         <LoadableAvatar
           size={24}
@@ -44,7 +47,7 @@ export default function WalletLabel() {
   }
 
   return (
-    <Button variant="secondarySmall" onClick={openAuthModal}>
+    <Button variant="secondarySmall" onClick={openAuthModal} className={classNames.wrapper}>
       Log in
     </Button>
   )

diff --git a/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenuMobile.module.scss b/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenuMobile.module.scss
@@ -69,3 +69,7 @@
     color: var(--earn-protocol-primary-100);
   }
 }
+
+.buttonWrapper {
+  width: 100%;
+}
diff --git a/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenuMobile.tsx b/packages/app-earn-ui/src/components/layout/Navigation/NavigationMenuMobile.tsx
@@ -95,7 +95,9 @@ export const NavigationMenuMobile = ({
         </div>
       </div>
       {signUpComponent}
-      {walletConnectionComponent}
+      <div onClick={toggleMobileMenu} className={navigationMenuMobileStyles.buttonWrapper}>
+        {walletConnectionComponent}
+      </div>
     </>
   )
 }