fix: improve text visibility on routing form cards (#26579)

[ousamabenyounes]

What does this PR do?

• Fixes Text hiding on routing form card #26579

Summary

The ListLinkItem component in packages/ui/components/list/List.tsx was hiding text on routing form cards at narrow viewports due to two issues:

1. CSS truncate class on the Link wrapper forced white-space: nowrap; overflow: hidden, preventing text from wrapping at all
2. JavaScript substring(0, 100) hard-truncated subheading text regardless of available space

Changes:

• Replaced truncate with min-w-0 on the Link wrapper — allows flex child to shrink properly without forcing single-line text
• Replaced JavaScript substring truncation with CSS line-clamp-2 — shows up to 2 lines with ellipsis, adapting to viewport width
• Changed leading-none to leading-normal on the subheading for proper multi-line spacing
• Added break-words to handle long unbroken strings

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

TZ=UTC yarn vitest run packages/ui/components/list/list.test.tsx

• Navigate to Apps > Routing Forms
• Verify text is visible and wraps on cards, especially at narrow viewports (~325px)
• Long descriptions should show up to 2 lines with ellipsis instead of being hidden

Checklist

• My code follows the style guidelines of this project
• I have self-reviewed my code
• My changes generate no new warnings

Generated by Claude Code
Vibe coded by ousamabenyounes

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 416f8703-9d73-403c-992d-eb9fc8e9bcce

📥 Commits

Reviewing files that changed from the base of the PR and between 2911168 and a4aa9a3.

📒 Files selected for processing (2)

• packages/ui/components/list/List.tsx
• packages/ui/components/list/list.test.tsx

---

📝 Walkthrough

Walkthrough

Modified the ListLinkItem component in the list component to change text truncation from a JavaScript-based approach to CSS-based line clamping. The link container classes were updated from truncate to min-w-0, and the subHeading rendering was changed to use line-clamp-2 and break-words classes instead of substring logic that limited text to 100 characters. The typography line-height was adjusted from leading-none to leading-normal. Corresponding test cases were added to verify the new rendering behavior and class application.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The PR partially addresses issue #26579 by fixing text visibility through CSS and layout changes, but does not fully implement the complete restructuring (two-row layout, badge stacking, action repositioning) described in the linked issue.	Verify whether the PR is intended as a partial fix or if additional changes are needed to fully resolve the layout and alignment issues mentioned in issue #26579.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: improve text visibility on routing form cards (#26579)' clearly describes the main change: improving text visibility on routing form cards, which is the primary objective of the PR.
Description check	✅ Passed	The PR description is detailed and directly related to the changeset, explaining the problem (CSS truncate and JavaScript substring truncation) and the solution (min-w-0, line-clamp-2, etc.).
Out of Scope Changes check	✅ Passed	All changes in the PR are directly scoped to fixing text visibility in ListLinkItem through CSS and truncation logic updates, with corresponding test additions, remaining within the stated objectives.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}