Redesign LessonInvitePanel for mobile-first invite UI

[sahilkashyap64]

Motivation

• Make the lesson invite UX match the provided mobile design so the invite flow feels native on phones (header action, compact tabs, selection summary, new-player form and chips).
• Preserve existing invite behavior while improving layout and readability on small screens.

Description

• Reworked LessonInvitePanel markup and Tailwind classes into a mobile-first card with a header action (Done) and rounded container (src/components/modals/LessonInvitePanel.jsx).
• Added selectedCount via useMemo to summarize processed invites and surface a compact selection summary in the header area.
• Reorganized the invite form into a dashed “Invite Someone New” block with stronger input styles and preserved fields (emails, phone numbers, expires_in_days).
• Replaced the single desktop table-only results view with mobile-friendly status cards for each inviteRows entry and kept the original table view for sm and larger screens.

Testing

• Ran npm test and all tests passed (5 tests, 0 failures).
• Started the dev server with npm run dev -- --host 0.0.0.0 --port 4173 and the app served successfully.
• Captured a Playwright screenshot of the mobile viewport to validate the layout (screenshot produced successfully).

---

Codex Task

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://CodeMyMobile.github.io/TTP_Coach_Web_Public/pr-preview/pr-61/
Built to branch gh-pages at 2026-02-26 20:14 UTC. Preview will be ready when the GitHub Pages deployment is complete.