[netomi]

Reported while testing search results: on an extension with both reviews and a large download count — redhat.java on open-vsx.org — the download count overflows the card.

Why it overflows

The footer is a space-between flex row of two groups, and neither can give way:

• Left — ExtensionRatingStars always renders five icons (extension-rating-stars.tsx:42, [1,2,3,4,5].map(getStar)). Flex items default to min-width: auto, and a row of icons has nothing to shrink.
• Right — the download group sets flexShrink: 0.

Once the two intrinsic widths exceed the card, nothing yields and the count is pushed past the edge. redhat.java hits it squarely: rating 5.0 (five filled stars), 16 reviews, and 41,183,269 downloads → 41M in a monospace font. That's the "reviews and lots of downloads" combination — it needs both halves at their widest.

The only relief was a container query hiding the review count below 134px. That's one fixed number guarding content whose width varies with the download string, which is why 41M spills where 12K does not.

The change

The rating is now one star and the number. Five icons are an intrinsic width that cannot shrink; ★ 5.0 is bounded, roughly half as wide, and arguably says more than a row of icons the reader has to count. An extension nobody has reviewed shows nothing at all, rather than five grey stars claiming the width to state a score that does not exist.

The row gets the shrink discipline the name row above it already has — that row uses overflow: hidden, minWidth: 0 and explicit shrink priorities; the footer was the one row that never got it. Now: a gap so the groups cannot touch, minWidth: 0 + overflow: hidden on the rating so it clips, flexShrink: 0 kept on the count.

Which extension is more popular is what the eye compares across a grid of these, so the download count is never what gives way — the rating beside it is. Overflow becomes structurally impossible rather than tuned away, and the 134px magic number is deleted rather than retuned.

The loading skeleton was drawing five stars too, so it now matches the footprint the real card has.

ExtensionRatingStars itself is untouched — the detail page and the reviews list have room for five stars and still use it.

Testing

Three tests in a new extension-card.spec.tsx: the rating renders as exactly one StarIcon plus 5.0 and (16); the download count survives beside it; and an unreviewed extension renders no star at all.

Full webui suite green (289 tests, 56 files), tsc --noEmit and yarn lint clean.

Not verified in a browser. This build image has no engine Playwright supports (Playwright does not support chromium on ubuntu26.04-x64, and there's no chromium package), so I could not render the before or after. That shaped the fix: it's built so that overflow cannot happen for any content width, rather than tuned to measurements I couldn't take. The visual change — one star instead of five — is worth a look on a real page before merging, particularly at the narrow end of the grid and on a card with no reviews.

🤖 Generated with Claude Code

[netomi]

Before:

After:

[netomi]

vs.

[Copilot]

🟡 Changes recommended

The new unit tests hard-code locale-dependent compact-number strings (and the new rating formatting isn’t locale-aware), which can cause flaky CI and inconsistent numeric rendering across locales.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adjusts the ExtensionCard footer layout to prevent large download counts from overflowing the card in narrow grid layouts by shrinking/clipping the rating side instead of allowing the downloads side to spill.

Changes:

• Replaces the footer’s 5-star rating widget with a single star icon plus numeric rating and review count, and adds flex/overflow constraints to make overflow structurally impossible.
• Updates the loading skeleton footer to match the new rating footprint.
• Adds unit tests covering the new footer rating rendering rules and ensuring the download count still renders alongside it.

File summaries

File	Description
webui/src/components/extension-card.tsx	Updates footer flex behavior and rating display to avoid download count overflow; aligns skeleton footer footprint.
webui/test/unit/components/extension-card.spec.tsx	Adds unit tests validating the new footer rating/download rendering behavior.

Review details

Suppressed comments (1)

webui/test/unit/components/extension-card.spec.tsx:74

• This expectation hard-codes '1.2K', but compact number formatting is locale-dependent (suffix, decimal separator, spacing). Using an Intl formatter in the assertion makes the test stable across locales while still verifying that the download count is rendered.

        expect(screen.getByText('1.2K')).toBeInTheDocument();

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[gnugomez]

when we spotted this issue first one of my ideas was to collapse the stars into a number as well, I didn't did that just because I wasn't sure we wanted to move away from that

[netomi]

its really awful right now and we need to collapse the stars in the card view as I do not have any other idea. In the extension detail view, the stars are still not collapsed and there its fine.