From 7b6dcb7153e855fef8f7a78c48024a6ec243f6fa Mon Sep 17 00:00:00 2001
From: Chase Fleming <chasefleming@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:05:47 -0800
Subject: [PATCH] Fix mobile connect button (#1077)

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
---
 src/components/connect-button.tsx | 12 ++++++++----
 src/css/custom.css                |  7 +++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/connect-button.tsx b/src/components/connect-button.tsx
index 7b2ceed8f6..137d9186f3 100644
--- a/src/components/connect-button.tsx
+++ b/src/components/connect-button.tsx
@@ -4,9 +4,9 @@ import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
 import { useIsMobile } from '@site/src/hooks/use-is-mobile';
 import Dropdown from '@site/src/ui/design-system/src/lib/Components/Dropdown';
 
-const shortenAddress = (address: string, isMobile: boolean) => {
+const shortenAddress = (address: string) => {
   if (!address) return '';
-  return isMobile ? `${address.slice(0, 4)}...${address.slice(-3)}` : address;
+  return `${address.slice(0, 8)}...${address.slice(-3)}`;
 };
 
 const ConnectButton: React.FC = () => {
@@ -26,9 +26,13 @@ const ConnectButton: React.FC = () => {
   ];
 
   const fullAddress = user.addr ?? 'Unknown';
-  const displayAddress = shortenAddress(fullAddress, isMobile);
+  const displayAddress = shortenAddress(fullAddress);
 
-  return <Dropdown buttonLabel={displayAddress} items={dropdownItems} />;
+  return (
+    <div className="hide-connect-on-mobile">
+      <Dropdown buttonLabel={displayAddress} items={dropdownItems} />
+    </div>
+  );
 };
 
 export default ConnectButton;
diff --git a/src/css/custom.css b/src/css/custom.css
index 4bf5b9062b..c04f91b27d 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -120,4 +120,11 @@
   width: 300px;
   display: block;
   margin: 0 auto;
+}
+
+/* Only hide in in nav (not main menu on mobile) */
+@media (max-width: 960px) {
+  .navbar__items--right .hide-connect-on-mobile {
+    display: none !important;
+  }
 }
\ No newline at end of file