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 Ora Studio
Vibe coded by ousamabenyounes

---

Vibe Coded by Ousama Ben Younes
Developed With Ora Studio (Claude Code)

[coderabbitai]

📝 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.
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.
Description check	✅ Passed	The PR description clearly and specifically addresses the changeset: it explains why text was hidden, details the exact CSS and JS changes made, and links to the issue being fixed.

_{✏️ 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.}

[github-actions]

This PR has been marked as stale due to inactivity. If you're still working on it or need any help, please let us know or update the PR to keep it active.

[github-actions]

This PR has been marked as stale due to inactivity. If you're still working on it or need any help, please let us know or update the PR to keep it active.