Player info name font scaling

[JB940]

Before opening a PR: discuss new features on Discord first, and file bugs or small improvements as issues. You must be assigned to an approved issue — unsolicited PRs will be auto-closed.

Add approved & assigned issue number here:

Resolves #4863

Description:

In player-info-overlay: Make the PlayerName monospace, this allows to scale the font-size based on pressure of the icons. All names will be text-lg (or sm for mobile) until the icons and alliance/betrayal puts spacial pressure, in which case the font-size gets reduced. If and only if the min font-size is reached through clamping, should the text start wrapping.

See album for various different device sizes, and different icons
https://imgur.com/a/20xfHFO

Please complete the following:

• I have added screenshots for all UI updates

Please put your Discord username so you can be contacted if a bug or regression is found:

jB940

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b4af0faf-7ae7-4e7d-808b-03e6b547dc76

📥 Commits

Reviewing files that changed from the base of the PR and between 5ed8bff and 1ac9113.

📒 Files selected for processing (1)

• src/client/hud/layers/PlayerInfoOverlay.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/client/hud/layers/PlayerInfoOverlay.ts

---

Walkthrough

The player overlay precomputes icons, scales player-name text based on available space, and updates identity, alliance, and betrayal layouts to support constrained widths.

Changes

Player identity layout

Layer / File(s)	Summary
Icon precomputation and name sizing src/client/hud/layers/PlayerInfoOverlay.ts	renderPlayerNameIcons uses precomputed icons. renderPlayerInfo computes player state before sizing the name. Name sizing accounts for viewport width, name length, and visible indicators.
Identity and status layout src/client/hud/layers/PlayerInfoOverlay.ts	The identity container supports constrained wrapping. Alliance content can wrap vertically. Betrayal content uses a flex-wrapped span. Flags and icons resist shrinking.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• openfrontio/OpenFrontIO#3971: Both PRs modify player identity and status rendering, including alliance indicators.
• openfrontio/OpenFrontIO#4562: Both PRs modify PlayerInfoOverlay.renderPlayerInfo layout sizing.
• openfrontio/OpenFrontIO#4816: Both PRs modify PlayerInfoOverlay.ts player icon rendering.

Suggested labels: UI/UX

Suggested reviewers: evanpelle

Poem

Icons stay clear, names resize,
Alliance wraps when space is tight.
Betrayal follows in its row,
The player bar stays neat below.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: responsive font scaling for player names in the player info overlay.
Description check	✅ Passed	The description directly explains the player name scaling, monospace font, wrapping behavior, and linked issue.
Linked Issues check	✅ Passed	The changes address issue #4863 by scaling player names, preserving icon priority, and enabling wrapping only after minimum sizing.
Out of Scope Changes check	✅ Passed	The summarized changes remain focused on player info overlay layout, icon handling, and responsive player name sizing.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[JB940]

I am making this pull and such so that the PR gets AI checked and the branch goes into the dev server to test.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/client/hud/layers/PlayerInfoOverlay.ts (1)

413-413: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace the removed Tailwind utility.

Unless the project defines a custom utility, Tailwind CSS 4 ignores flex-grow-1. Use grow or grow-1 so this identity column has the intended growth behavior. Tailwind v4 removed flex-grow-* utilities in favor of grow-*. (tailwindcss.com)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/client/hud/layers/PlayerInfoOverlay.ts` at line 413, Update the class
list on the identity column in PlayerInfoOverlay to replace the unsupported
flex-grow-1 utility with the Tailwind v4 grow utility, preserving the column’s
intended growth behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/client/hud/layers/PlayerInfoOverlay.ts`:
- Around line 300-305: Update the identity-row sizing logic around isDesktop and
scale to derive capacity from the row’s actual available width after fixed
columns, padding, and status content, rather than using a fixed mobile value.
Measure the identity-row container with ResizeObserver or equivalent
container-relative sizing before calculating scale, while preserving the
existing minimum-scale behavior.

---

Nitpick comments:
In `@src/client/hud/layers/PlayerInfoOverlay.ts`:
- Line 413: Update the class list on the identity column in PlayerInfoOverlay to
replace the unsupported flex-grow-1 utility with the Tailwind v4 grow utility,
preserving the column’s intended growth behavior.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: bba2e51d-f0c9-49cc-90e4-44511b2e8271

📥 Commits

Reviewing files that changed from the base of the PR and between ad02955 and a8772ba.

📒 Files selected for processing (1)

• src/client/hud/layers/PlayerInfoOverlay.ts

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.