Simplify mobile Hand & Brain UI - display pieces in single row

[Copilot]

This PR addresses the mobile usability issue in the Hand & Brain chess mode where players had to scroll to see all piece selection options.

Problem

The piece selection UI in HandBrainPlayControls used a fixed 3-column grid layout, causing chess pieces to be displayed in 2 rows of 3 pieces each. On mobile devices, this often required scrolling to access all piece options, creating a poor user experience.

Solution

Modified the piece selection layout to be responsive:

• Mobile (≤768px): All 6 pieces display in a single row using grid-cols-6
• Desktop (>768px): Maintains original 2×3 grid layout using md:grid-cols-3

Key Changes

• Grid layout: grid-cols-3 → grid-cols-6 md:grid-cols-3
• Container width: max-w-48 → max-w-full md:max-w-48
• Button size: h-12 w-12 → h-10 w-10 md:h-12 md:w-12
• Icon size: h-6 w-6 → h-5 w-5 md:h-6 md:w-6
• Gap spacing: gap-2 → gap-1 md:gap-2

Visual Results

Mobile Layout - Single Row (No Scrolling Required):

Desktop Layout - Original 2×3 Grid Preserved:

The solution is minimal and surgical, preserving all existing functionality while eliminating the mobile scrolling issue. Players can now see and access all piece options at a glance on mobile devices.

Fixes #195.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• dock2.csslab.ca
  • Triggering command: next-server (v15.4.3) (dns block)
• fonts.googleapis.com
  • Triggering command: node /home/REDACTED/work/maia-platform-frontend/maia-platform-frontend/node_modules/.bin/next build (dns block)
  • Triggering command: next-server (v15.4.3) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 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 Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maia-platform-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 5, 2025 2:15pm