Use a mobile section picker instead of overflowing competition tabs

[coder13]

Motivation

• Mobile layouts with many competition tabs were overflowing and required scrolling; the intent is to provide a compact, scalable navigation for mobile without horizontal tab scrolling.
• Keep the existing tabbed navigation intact for md+ screens so desktop and tablet UX remain unchanged.
• Adhere to the spacing guideline by using space-y-2 instead of odd mt-* spacing to keep vertical rhythm consistent.

Description

• Added useNavigate and a mobile-only <select> dropdown in src/layouts/CompetitionLayout/CompetitionLayout.tsx to act as a compact "Section" picker for mobile screens.
• The dropdown only includes tabs that are visible on mobile by filtering out tabs with hiddenOnMobile, and selecting an option navigates via navigate(event.target.value) with the value bound to the current pathname.
• Kept the existing tab row for md and larger breakpoints by rendering the original StyledNavLink list inside a hidden md:flex container.
• Updated the container spacing to space-y-2 md:space-y-0 to follow the spacing guidance and avoid mt-* usage.

Testing

• Ran yarn eslint src/layouts/CompetitionLayout/CompetitionLayout.tsx, which completed successfully.

---

Codex Task

[netlify]

✅ Deploy Preview for competition-groups ready!

Name	Link
🔨 Latest commit	dffb923
🔍 Latest deploy log	https://app.netlify.com/projects/competition-groups/deploys/6a02b3b483769a0007fe73d0
😎 Deploy Preview	https://deploy-preview-70--competition-groups.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 63 Accessibility: 84 Best Practices: 100 SEO: 96 PWA: 90 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.