Implement mobile-responsive UI with automatic device detection

[Copilot]

This PR adds comprehensive mobile device detection and responsive UI layout to the MixClick cookie clicker game. The application now automatically detects when users are on mobile devices and switches to a mobile-optimized layout for improved usability on small screens and touch interfaces.

Changes Made

Mobile Detection System

• Created useMobileDetection custom hook that detects mobile devices using multiple criteria:
  • Screen width detection (≤768px breakpoint)
  • User agent string analysis for mobile keywords
  • Touch capability detection
  • Real-time updates on window resize

Responsive Components

TopBar Component:

• Desktop: Maintains original horizontal layout with save/load buttons on left, stats centered, and action buttons on right
• Mobile: Two-row compact layout with buttons at top and game stats arranged in a 2x2 grid below

Game Layout:

• Desktop: Preserves existing spacious design with larger buttons and fonts
• Mobile: Compact design with smaller fonts, reduced padding, and full-width upgrade buttons for better touch interaction

Modal Components:

• All modals (Settings, Popup, Notification) now adapt to mobile screens
• Mobile modals use smaller padding, stacked button layouts, and appropriate positioning
• Notification modal repositions to avoid interference with mobile top bar

Visual Comparison

Desktop Layout:

Mobile Layout:

Mobile Modal Example:

Key Features

• Seamless Experience: Layout automatically switches between desktop and mobile without page refresh
• Touch-Optimized: Larger tap targets, better spacing, and mobile-friendly button sizes
• Preserved Functionality: All game features work identically across both layouts
• Performance: Minimal overhead with efficient detection logic that only runs on mount and resize

The implementation maintains the existing desktop experience while providing an excellent mobile experience for users on phones and tablets.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
mix-click	Ready	Preview	Comment	Sep 23, 2025 1:16am

[mixtapejaxson]

LGTM