diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 50fac566..84312d96 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -45,15 +45,15 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
// Connected state
if (isConnected && address) {
- const shortAddr = address.slice(0, 6);
+ const displayAddr = truncateAddress(address);
- // Compact mode: PFP + short identifier for mobile top nav
+ // Compact mode: bordered box for mobile top nav (matches hamburger box height)
if (compact) {
return (
{profile?.pfpUrl && (
// eslint-disable-next-line @next/next/no-img-element
@@ -67,37 +67,30 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
)}
{profile
? `@${profile.username.length > 10 ? profile.username.slice(0, 10) + "…" : profile.username}`
- : shortAddr}
+ : displayAddr}
);
}
- // Full mode: PFP + username + shortened address (no disconnect)
+ // Full mode: pill with PFP + @username or truncated address
return (
-
-
- {profile?.pfpUrl && (
- // eslint-disable-next-line @next/next/no-img-element
-

- )}
- {profile ? `@${profile.username}` : shortAddr}
-
- {profile && (
-
- {shortAddr}
-
+
+ {profile?.pfpUrl && (
+ // eslint-disable-next-line @next/next/no-img-element
+

)}
-
+ {profile ? `@${profile.username}` : displayAddr}
+
);
}
@@ -123,8 +116,8 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
type="button"
className={
compact
- ? "border-accent text-accent hover:bg-accent hover:text-background rounded border px-2.5 py-1 text-xs transition-colors"
- : "border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors"
+ ? "border-border text-accent hover:bg-accent hover:text-background rounded border px-2 py-1 text-xs font-medium transition-colors"
+ : "border-border text-accent hover:bg-accent hover:text-background rounded-full border px-3 py-1 text-xs font-medium transition-colors"
}
>
{compact ? "Connect" : "connect wallet"}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 411839a6..ed2879ae 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -59,22 +59,22 @@ export function NavBar() {
{/* Right side: wallet + mobile toggle */}
-
- {/* Desktop: full ConnectWallet */}
+
+ {/* Desktop: pill ConnectWallet */}
- {/* Mobile: compact Connect button / PFP in top nav */}
+ {/* Mobile: matched-height boxes — PFP box + hamburger box */}