From 9918d1122ff9f5eeafa934a9ce263843fa6315af Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 1 Apr 2026 07:20:20 +0100
Subject: [PATCH] [#692] Fix nav bar alignment and border-radius consistency

- Mobile: add explicit h-7 to both compact wallet and hamburger for matching
  heights, wrap compact wallet div in flex items-center
- Desktop+Mobile: change rounded-full (pill) to rounded (square) on wallet
  button for consistent terminal aesthetic

Fixes #692

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ConnectWallet.tsx | 8 ++++----
 src/components/NavBar.tsx        | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
index 84312d96..55a47235 100644
--- a/src/components/ConnectWallet.tsx
+++ b/src/components/ConnectWallet.tsx
@@ -53,7 +53,7 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
         <Link
           href={`/profile/${address}`}
           onClick={onNavigate}
-          className="border-border text-accent inline-flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
+          className="border-border text-accent inline-flex h-7 items-center gap-1.5 rounded border px-2 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
         >
           {profile?.pfpUrl && (
             // eslint-disable-next-line @next/next/no-img-element
@@ -77,7 +77,7 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
       <Link
         href={`/profile/${address}`}
         onClick={onNavigate}
-        className="border-border text-accent inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
+        className="border-border text-accent inline-flex items-center gap-1.5 rounded border px-3 py-1 text-xs font-medium hover:opacity-80 transition-opacity"
       >
         {profile?.pfpUrl && (
           // eslint-disable-next-line @next/next/no-img-element
@@ -116,8 +116,8 @@ export function ConnectWallet({ onNavigate, compact }: ConnectWalletProps = {})
               type="button"
               className={
                 compact
-                  ? "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"
+                  ? "border-border text-accent hover:bg-accent hover:text-background flex h-7 items-center rounded border px-2 py-1 text-xs font-medium transition-colors"
+                  : "border-border text-accent hover:bg-accent hover:text-background rounded 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 fb1dd290..71e6dbd2 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -72,17 +72,17 @@ export function NavBar() {
 
         {/* Right side: wallet + mobile toggle */}
         <div className="flex items-center gap-1.5">
-          {/* Desktop: pill ConnectWallet */}
+          {/* Desktop: ConnectWallet */}
           <div className="hidden md:block">
             <ConnectWallet />
           </div>
           {/* Mobile: matched-height boxes — PFP box + hamburger box */}
-          <div className="md:hidden">
+          <div className="flex items-center md:hidden">
             <ConnectWallet compact />
           </div>
           <button
             onClick={() => setMobileOpen(!mobileOpen)}
-            className="border-border text-muted hover:text-foreground flex items-center justify-center rounded border px-2 py-1 transition-colors md:hidden"
+            className="border-border text-muted hover:text-foreground flex h-7 items-center justify-center rounded border px-2 py-1 transition-colors md:hidden"
             aria-label="Toggle menu"
             aria-expanded={mobileOpen}
           >