fix: prevent long language names from shrinking dashboard progress bars

[JanCizmar]

Problem

On the project dashboard, a language with a long name (e.g. "Arabic (Palestinian Territories) | العربية (الأراضي الفلسطينية)") shrinks the translation status progress bar to a sliver — for every language row, since all rows share one grid.

Cause

LanguageStats lays rows out with:

grid-template-columns: auto auto auto 10fr auto auto;

The auto name column grows to the name's full single-line (max-content) width — the text never wraps — and the 10fr bar column only receives leftover space, which can drop to zero.

Fix

grid-template-columns: fit-content(40%) auto auto minmax(120px, 1fr) auto auto;

• short names keep hugging their content, so the bar keeps nearly all its current width in the common case
• long names cap at 40% of the container and truncate with an ellipsis; the full name is shown in a tooltip on hover (same pattern as fix: add tooltip and responsive wrapping for long language names (#3611) #3657 uses for the LanguagesSelect dropdown), keeping every row single-line
• the bar column has a 120px floor and — because grid tracks are shared across rows — all bars stay equal width and aligned, so they remain visually comparable
• language tags get the same ellipsis treatment, so an overlong custom tag cannot clip the Base chip or bleed under the bar
• drive-by: removed a stray debug className="test" and redundant null-handling on the already-asserted language

Verification

Measured a standalone replica of the grid in a headless browser at 700px and 450px container widths, covering short-names-only, mixed long/short names, and an overlong unbreakable custom tag: bars are equal width across rows in all cases, names/tags truncate on a single line, nothing overlaps the bar, no horizontal overflow.

Related: #3657 addresses long language names in the LanguagesSelect dropdown — different component, same truncation pattern.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 15 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 23271fff-0c33-4739-9edf-df1d96da127f

📥 Commits

Reviewing files that changed from the base of the PR and between 0d2c5a3 and de74bcc.

📒 Files selected for processing (1)

• webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx

📝 Walkthrough

Walkthrough

The LanguageStats dashboard’s CSS grid template now constrains the first column to fit-content(50%) and the fourth column to minmax(120px, 10fr). No component logic or rendering changes were made.

Changes

LanguageStats layout

Layer / File(s)	Summary
Update grid column sizing webapp/src/views/projects/dashboard/LanguageStats/LanguageStats.tsx	StyledContainer now uses fit-content(50%) for the first grid column and minmax(120px, 10fr) for the fourth column.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main fix: preventing long language names from collapsing dashboard progress bars.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch jancizmar/fix-dashboard-language-bar-width

---

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