Feat: Enhance mobile portrait UI for no-scroll experience

[daruoktab]

This commit redesigns the user interface for mobile portrait view to ensure all primary sections (board, captured pieces, game info/actions) are accessible without requiring the main page to scroll. The desktop layout remains unchanged.

Key changes include:

1. Compact Captured Pieces for Mobile:

   • CapturedPiecesDisplay.tsx now uses responsive styling (text size, padding, gaps) to be significantly more compact on smaller screens.

2. Toggleable Mobile Info Overlay:

   • Introduced MobileInfoOverlay.tsx, a new component that appears as an overlay on mobile screens.
   • This overlay contains the game status message, NotationDisplay (move history), and the "Reset Game" button.
   • The overlay itself is scrollable if its content is long.
   • A new "Info" button (icon) in the header (visible only on mobile) toggles this overlay.
   • State for overlay visibility (isInfoOverlayVisible) and a toggle handler (toggleInfoOverlay) were added to App.tsx.

3. Revised Mobile Layout in AppLayout.tsx:

   • On mobile screens (smaller than lg):
     • The two desktop sidebars (leftSidebarContent and rightSidebarContent) are now hidden.
     • Captured pieces (using the compact CapturedPiecesDisplay) are rendered directly above and below the chessboard.
     • The layout order on mobile is: Black's Captured Pieces -> Chessboard -> White's Captured Pieces.
   • The desktop three-column layout is preserved for lg screens and up.
   • Props passed from App.tsx to AppLayout.tsx were updated to support this new structure (e.g., passing raw captured piece data).

4. Board Area Refinements for Mobile:

   • Padding around the chessboard wrapper in App.tsx (passed as mainContent) is now responsive (reduced on smaller screens).
   • The main layout gap in AppLayout.tsx is also responsive.
   • The existing smallest square size (w-10 h-10) was deemed adequate after these padding adjustments.

5. Responsiveness Review:

   • A thorough code review confirmed that responsive classes are applied correctly and the intended layouts for mobile and desktop are achieved.

These changes significantly improve the user experience on mobile portrait devices by providing a dedicated, non-scrolling interface for the core application content.