Fix navigation bar display on mobile devices

[gtg7784]

Background

The navigation bar was not displaying correctly on mobile devices. On smaller screens (≤767px), the navigation items would overflow horizontally, causing layout issues and making it difficult for users to access all navigation options.

Changes

Added responsive media queries to the navigation components:

• NavContainer: Set width to calc(100% - 24px) on mobile to fit within the viewport with proper margins
• NavItemBase & NavItemLink:
  • Added white-space: nowrap and min-width: 0 to allow proper flex shrinking
  • Reduced font-size from 16px to 11px (10px on very small screens ≤374px)
  • Reduced horizontal padding from 23px to 10px (6px on ≤374px)
• SignInButton: Reduced padding and gap on very small screens (≤374px)

Breakpoints

Screen Size	Changes Applied
≥768px	Desktop (unchanged)
≤767px	Mobile: 11px font, 10px padding
≤374px	Small mobile: 10px font, 6px padding

Testing

1. Open the frontend on a mobile device or use browser DevTools responsive mode
2. Test at various widths: 320px, 375px, 414px, 768px
3. Verify all navigation items (LEADERBOARD, PROFILE, GITHUB, Sign In) are visible and tappable
4. Verify no horizontal overflow occurs

[vercel]

@gtg7784 is attempting to deploy a commit to the Inevitable Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
tokscale	Ready	Preview, Comment	Dec 24, 2025 0:46am

[junhoyeo]

@gtg7784 👍👍👍 thanks