"Installed" Badge is squeezed for CJK text

[zenyr]

App Version

v3.20.1

API Provider

Not Applicable / Other

Model Used

N/A

🔁 Steps to Reproduce

1. Setup: N/A
2. Actions

• Select Korean for Roo Code UI
• Open MCP marketplace
• (optional) Install an MCP server

3. The issue

• "Installed" label gets squeezed due to flex-box layout

💥 Outcome Summary

Expected: "설치됨" should be visible in a single line
Actual: only "치" is visible since the span tag got squeezed to death the minimum width

📄 Relevant Logs or Errors (Optional)

[dosubot]

Hi @zenyr! I'm Dosu and I’m helping the Roo-Code team.

I couldn't find any documentation or existing tickets about the "Installed" badge being squeezed for CJK text. However, recent release notes mention that the UI has gone through Tailwind CSS migration and reversion to address layout stability issues, which could be related to what you're seeing [source].

There aren't any official CSS guidelines for CJK text or flex-box issues in the docs. Based on typical flex-box behavior, this kind of squeezing often happens if the badge's container doesn't have a min-width or if flex-shrink is set too aggressively. You might want to check the CSS for the badge and try setting a min-width, white-space: nowrap, or adjusting flex-shrink: 0 on the span or its container to prevent it from collapsing with CJK text. If you need more targeted help, sharing the relevant CSS or markup could help narrow it down.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[zenyr]

Dosu bot's right, it's rather easy to fix.

Note: https://github.com/zenyr/Roo-Code/tree/fix/installed-label-is-too-narrow is available once the issue is assigned.

[mrubens]

Oh nice! Feel free to open the PR, or I’ll fix soon. Thank you!

[daniel-lxs]

Hey @zenyr, thank you for reporting this issue!

Made a PR (#4649) to fix it but also made sure that the tags wrap correctly: