Skip to content

Fix mobile navbar hamburger icon alignment#31

Merged
kevinle623 merged 2 commits intomainfrom
claude/fix-navbar-alignment-Vbbec
Mar 28, 2026
Merged

Fix mobile navbar hamburger icon alignment#31
kevinle623 merged 2 commits intomainfrom
claude/fix-navbar-alignment-Vbbec

Conversation

@kevinle623
Copy link
Copy Markdown
Owner

Summary

  • Give the MobileNav hamburger button min-h-[44px] min-w-[44px] flex items-center justify-center to match the sizing of ThemeToggle and LogoutButton
  • Wrap the hamburger line spans in a positioned inner <span className="relative w-6 h-5 block"> so the icon renders correctly within the larger touch target
  • Fixes vertical misalignment between the hamburger and the right-side icon buttons on both the landing page and dashboard mobile headers

Test plan

  • Open the landing page on a mobile viewport — verify the hamburger icon is vertically centered with the ThemeToggle icon
  • Open the dashboard on a mobile viewport — verify the same alignment with ThemeToggle and LogoutButton
  • Confirm hamburger open/close animation still works correctly

https://claude.ai/code/session_01LjFtR9ZSYKMXCt1fsqNZww

Give the hamburger button the same min-h/min-w/flex centering as
ThemeToggle and LogoutButton (44x44px touch target, flex items-center
justify-center) so the icons align consistently across landing and
dashboard mobile headers.

https://claude.ai/code/session_01LjFtR9ZSYKMXCt1fsqNZww
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
statify-2pfb Ready Ready Preview, Comment Mar 28, 2026 4:04pm

@kevinle623 kevinle623 merged commit e54edac into main Mar 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants