Restyle the player profile as stacked sections

[johnpooch]

What this PR does

Restyles PlayerProfileContent to match the stacked-sections pattern from the Game Info prototype. The code is rewritten inside packages/web; nothing is imported from the playground. Both screens that use it are covered: Home /player/:id and game detail /game/:id/phase/:id/player/:id.

• Sections: each group is a <section> with a muted text-sm font-medium label above a bordered Card (overflow-hidden py-0 / CardContent flex flex-col divide-y p-0). The card has its border at every width, so rows no longer float on the page below 500px the way they did with ScreenCard.
• Rows: the label is in the foreground colour and the value is text-sm text-muted-foreground truncate. This matches Game Info and reverses the old muted-label/bold-value styling. The info button uses -m-2 p-2 so it has a bigger tap target. Labels are sentence case ("NMR rate", "Total games"). I didn't add leading icons.
• Header: the avatar, name and "Joined …" line now sit outside any card. Long names truncate instead of widening the scroll container. Before this change, a 38-character name with no spaces made the Home content 535px wide inside a 390px viewport.
• Commitment tier as a row, not a badge: the badge next to the name is gone. The tier (High / Medium / Low / New) is the first row of the Commitment card, above NMR rate, with an info popover. The popover explains the rated tiers, and for undefined it says the player hasn't played enough rated phases yet. CommitmentBadge had no other callers, so it and its test are deleted and the tier labels are inlined in PlayerProfileContent.
• Loading: both screens now show PlayerProfileContentSkeleton instead of <div></div>. The skeleton uses the same Section/StatRow structure. With a 4s delay on the mock, I measured every section and row box before and after the swap: they are identical at 390px and 1280px on both screens. On game detail the Suspense now wraps only the content, so the app bar stays visible while loading.

About the clipped values

I could not reproduce "Hig" / "0%" / "28" on the Home screen. I measured every value's bounding box in headless Chromium at widths from 320 to 1024px, including with mobile emulation, and no value crossed its container. What I did find:

• Game detail: PlayerProfileScreen had a bare <Panel.Content> with no padding. Its sibling screens use px-3 py-4 (GameInfoScreen.tsx:66, PlayerInfoScreen.tsx:43). The values ended at exactly x=390 of a 390px viewport, and on desktop they ran into the map's border, so any bezel, rounded corner or overlay scrollbar cuts them off. This PR adds the same px-3 py-4.
• Home: below 500px the only inset was HomeLayout's px-2 (8px), because ScreenCardContent is px-0 at that width. The new card rows have px-6 inside a bordered card, so values now sit 32px from the edge at every width.

If the clipping you saw was in the native app, those two narrow insets are the most likely cause. I haven't verified that on a device.

Screenshots

From the Screenshot Diff run on the latest commit. Each image shows three panels, left to right: base, this PR, difference. The Home screen is /player/:id and the game-detail screen is /game/:id/phase/:id/player/:id. The game-detail screen changed the same way for every game fixture, so only one fixture is shown here. The full set is in the Screenshot Diff comment.

Home, mobile (390px)

<img src="https://pr-1397-36317364663--diplicity-screenshot-diff.netlify.app/player-profile__mobile.png" width="960" alt="player-profile__mobile">

Home, desktop

<img src="https://pr-1397-36317364663--diplicity-screenshot-diff.netlify.app/player-profile__desktop.png" width="960" alt="player-profile__desktop">

Game detail, mobile (390px)

<img src="https://pr-1397-36317364663--diplicity-screenshot-diff.netlify.app/player-profile__active-movement__mobile.png" width="960" alt="player-profile__active-movement__mobile">

Game detail, desktop

<img src="https://pr-1397-36317364663--diplicity-screenshot-diff.netlify.app/player-profile__active-movement__desktop.png" width="960" alt="player-profile__active-movement__desktop">

Checklist

• This PR does one thing — no unrelated fixes, refactors, or drive-by cleanups bundled in
• For PRs of any significant complexity: I ran /review-pr against this PR in Claude Code and addressed (or responded to) its findings
• Tests cover the change: new PlayerProfileContent.test.tsx (there were no existing tests for this component). npm run lint, npx tsc -b --noEmit and npm run test (776 tests) all pass.
• Screenshots embedded in the PR description for any visual changes (see CLAUDE.md)

🤖 Generated with Claude Code

https://claude.ai/code/session_01LPurUZYutz4eEQgBrgLwYH

---

Generated by Claude Code

---

Generated by Claude Code

[github-actions]

Screenshot diff

24 screens changed of 276 captured.

Each image is three panels left to right: base, this PR, difference. Click to view full size.

player-profile__active-build__desktop — 5,897 px (0.576%)

player-profile__active-civil-disorder__desktop — 5,897 px (0.576%)

player-profile__active-draw-proposal__desktop — 5,897 px (0.576%)

player-profile__active-eliminated__desktop — 5,897 px (0.576%)

player-profile__active-game-master-chat__desktop — 5,897 px (0.576%)

player-profile__active-movement__desktop — 5,897 px (0.576%)

player-profile__active-named-coast__desktop — 5,897 px (0.576%)

player-profile__active-retreat__desktop — 5,897 px (0.576%)

player-profile__active-seat-open__desktop — 5,897 px (0.576%)

player-profile__finished-draw__desktop — 5,897 px (0.576%)

player-profile__finished-solo__desktop — 5,897 px (0.576%)

player-profile__active-build__mobile — 5,892 px (1.79%)

player-profile__active-civil-disorder__mobile — 5,892 px (1.79%)

player-profile__active-draw-proposal__mobile — 5,892 px (1.79%)

player-profile__active-eliminated__mobile — 5,892 px (1.79%)

player-profile__active-game-master-chat__mobile — 5,892 px (1.79%)

player-profile__active-movement__mobile — 5,892 px (1.79%)

player-profile__active-named-coast__mobile — 5,892 px (1.79%)

player-profile__active-retreat__mobile — 5,892 px (1.79%)

player-profile__active-seat-open__mobile — 5,892 px (1.79%)

4 further changed screens

• player-profile__finished-draw__mobile — 5,892 px (1.79%)
• player-profile__finished-solo__mobile — 5,892 px (1.79%)
• player-profile__mobile — 5,869 px (1.783%)
• player-profile__desktop — 5,744 px (0.561%)