From 8931f8c85da51c7a1dabbd31463d304a47e26926 Mon Sep 17 00:00:00 2001
From: Kai Chen <kaichen0728@gmail.com>
Date: Fri, 10 Jul 2026 01:02:36 -0700
Subject: [PATCH] fix: stop the mobile theme toggle shifting when the menu
 button flips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hamburger glyphs ☰ and ✕ have different advance widths, so the
button box resized on toggle and pushed the right-aligned theme toggle
sideways. Give the menu button a fixed square box (size-8) with the
glyph centered; both controls now hold their position.

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/components/nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/nav.tsx b/app/components/nav.tsx
index d35ab70..cb40a32 100644
--- a/app/components/nav.tsx
+++ b/app/components/nav.tsx
@@ -74,7 +74,7 @@ export default function Nav() {
           <ThemeToggle />
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 text-xl leading-none p-1"
+            className="inline-flex size-8 shrink-0 items-center justify-center text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 text-xl leading-none"
             aria-label={isOpen ? "Close menu" : "Open menu"}
             aria-expanded={isOpen}
           >