fix(game): center time-control header on Android (#3074)

[CloudyDino]

Closes #3074.

Summary

The active-game AppBar in lib/src/view/game/game_screen.dart defaulted to the Material left-aligned title on Android, so the time-control header (e.g. 🐢 1+0 • Rated) sat near the left edge instead of being centered between the leading ping icon and the trailing ⋯ menu.

This adds centerTitle: true to the seven AppBars in _GameScreenState.build that render time-control / challenge / lobby titles (active game, lobby seek, challenge sent/received, cancelled/declined/errored states, open challenge).

Proof

Built and ran the BEFORE (main) and AFTER (this branch) APKs on an Android emulator (API 36) with two test accounts pairing on a 1+0 Bullet seek, then measured the title text bounding box in each screenshot.

Build	Title leftmost	Title rightmost	Title center	Offset from screen center (540 px)
BEFORE (main)	x=220	x=550	x=385	−155 px (left of center)
AFTER (this PR)	x=362	x=714	x=538	−2 px (centered)

Screen width is 1080 px. AFTER lands within 2 px of the screen midpoint; BEFORE was off by 155 px.

The lobby-seek-loading AppBar was also tested but is visually unchanged because that variant has no trailing actions, so the M3 layout already centered it. The fix is still applied there for consistency.

Before	After

Test plan

• flutter analyze clean
• flutter test clean (per pre-merge checklist)
• Android manual smoke (emulator-5554, API 36): paired CD-Test-1 vs CD-Test-2 on 1+0 Bullet, confirmed title centered; tested lobby seek loading state, confirmed unchanged behavior.

[ijm8710]

Hi! Thanks for this. Few comments

1. fix: center time control header in active game #3101 also had a pr for this
2. In that pr, I had a comment outlining a plethora of other centering items. Admittedly some I'm pretty confident are unintended while others I'm unsure what the intention is fix: center time control header in active game #3101 (comment)
3. In When fetching games, title is off-center; plus few other screen examples #2024 I have an old centering issue where it's close but not quite centered. You can tell if you open the photo in the issue ticket and full screen it and compare it to the notch section up top. In some of your after photos I think I see the same issue. The top right one looks good but the bottom right one, are we sure that it is truly centered?

[CloudyDino]

In the bottom right photo, it's being centered in the remaining space. If we want it centered while ignoring the bars on the left, we could add a fake empty box on the right that's the same size as the bars on the left. I'll go ahead and close this though since that other PR exists. I didn't realize!

[ijm8710]

In the bottom right photo, it's being centered in the remaining space. If we want it centered while ignoring the bars on the left, we could add a fake empty box on the right that's the same size as the bars on the left. I'll go ahead and close this though since that other PR exists. I didn't realize!

That's odd though becuase both the top right and bottom right after photos have bars on left but top right looks centered despite that.

My instinct is the bars on left shouldn't influence the centering but admittedly I'm not a designer.

Lastly, your approach was slightly different then the other pr. Looks like you did your code line in 7 places. I'm not sure which is better but if you thought it necessary to include it perhaps it shouldn't be discounted?

[CloudyDino]

That's odd though becuase both the top right and bottom right after photos have bars on left but top right looks centered despite that.

That's because the kebab menu on the top right is about the same size as the bars on the top left. On the bottom right photo, that menu isn't there and so the title scoots over to the right so we'd need to make the kebab menu space still be taken up, but not display anything so that the title is still centered. I don't mind taking a look again after the other PR is merged in and we can see all the places the centering is / isn't happening