Fix mobile connect button (#1077)

Co-authored-by: Chase Fleming <[email protected]>

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;

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;
+  }
 }