fix(routing): prevent long model names from overflowing tier cards

[SebConejo]

Summary

• Long model names (e.g. custom:869cda85-2957-4209-bace-263bbfb61f0b/MiniMax-M2.7) were pushing tier cards beyond their grid column, breaking the 4-column layout
• Add min-width: 0 on .routing-card__model-chip and .routing-card__chip-main so the existing text-overflow: ellipsis actually kicks in
• Add overflow: hidden on .routing-card as a safety net
• Fix provider icon vertical alignment in the model chip (flex-start → center)

Test plan

• Frontend tests pass (2178/2178)
• Verify long model names show ellipsis instead of overflowing
• Verify all 4 tier cards remain equal width
• Verify provider icons are vertically centered with model name text

---

Summary by cubic

Fixes tier cards overflowing their grid when model names are long by enabling proper ellipsis and clamping overflow. Also centers the provider icon in the model chip.

• Bug Fixes
  • Add min-width: 0 to model chip containers so ellipsis applies.
  • Add overflow: hidden to the card to prevent layout spill.
  • Center provider icon by switching align-items to center.

^{Written for commit a1ebb2b. Summary will update on new commits.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.01%. Comparing base (2493d97) to head (a1ebb2b).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1600   +/-   ##
=======================================
  Coverage   98.01%   98.01%           
=======================================
  Files         119      119           
  Lines        8967     8967           
  Branches     3372     3372           
=======================================
  Hits         8789     8789           
  Misses        176      176           
  Partials        2        2           

Flag	Coverage Δ
frontend	98.00% <ø> (ø)
shared	100.00% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/frontend/src/styles/routing.css">

<violation number="1" location="packages/frontend/src/styles/routing.css:142">
P2: `overflow: hidden` on `.routing-card` can clip chip tooltips that are absolutely positioned outside their trigger.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: overflow: hidden on .routing-card can clip chip tooltips that are absolutely positioned outside their trigger.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/frontend/src/styles/routing.css, line 142:

<comment>`overflow: hidden` on `.routing-card` can clip chip tooltips that are absolutely positioned outside their trigger.</comment>

<file context>
@@ -139,6 +139,7 @@
   border: 1px solid hsl(var(--border));
   border-radius: var(--radius);
   min-height: 0;
+  overflow: hidden;
 }
 
</file context>

Suggested change

	overflow: hidden;
	overflow: visible;