From a4aa9a381c2a4e85462a6ed79e48cd64d5dc25ed Mon Sep 17 00:00:00 2001
From: Ousama Ben Younes <benyounes.ousama@gmail.com>
Date: Sun, 12 Apr 2026 22:18:13 +0000
Subject: [PATCH] fix: improve text visibility on routing form cards (#26579)

Replace JavaScript substring truncation with CSS line-clamp and remove
aggressive truncate class from ListLinkItem link wrapper so text wraps
properly on narrow viewports instead of being hidden.

Generated by Claude Code
Vibe coded by ousamabenyounes

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/ui/components/list/List.tsx      |  7 +++---
 packages/ui/components/list/list.test.tsx | 27 +++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 1487bb970d1c60..934be4350ca050 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -101,7 +101,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
         passHref
         href={href}
         className={classNames(
-          "text-default grow truncate text-sm",
+          "text-default min-w-0 grow text-sm",
           disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
         )}>
         <div className="flex items-center">
@@ -112,9 +112,8 @@ export function ListLinkItem(props: ListLinkItemProps) {
             </Badge>
           )}
         </div>
-        <h2 className="min-h-4 mt-2 text-sm font-normal leading-none text-neutral-600">
-          {subHeading.substring(0, 100)}
-          {subHeading.length > 100 && "..."}
+        <h2 className="min-h-4 mt-2 text-sm font-normal leading-normal text-neutral-600 line-clamp-2 break-words">
+          {subHeading}
         </h2>
         <div className="mt-2">{children}</div>
       </Link>
diff --git a/packages/ui/components/list/list.test.tsx b/packages/ui/components/list/list.test.tsx
index 3039114e3d8d70..b5a8abaadfe4eb 100644
--- a/packages/ui/components/list/list.test.tsx
+++ b/packages/ui/components/list/list.test.tsx
@@ -90,6 +90,33 @@ describe("Tests for ListLinkItem component", () => {
     const action = screen.getByText("cta");
     expect(action).toBeInTheDocument();
   });
+
+  test("Should render full subHeading text without JavaScript truncation", () => {
+    const longText = "A".repeat(150);
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading={longText}>
+        Alright
+      </ListLinkItem>
+    );
+
+    const subHeading = screen.getByText(longText);
+    expect(subHeading).toBeInTheDocument();
+    expect(subHeading.tagName).toBe("H2");
+    expect(subHeading).toHaveClass("line-clamp-2");
+  });
+
+  test("Should not apply truncate class on the link wrapper", () => {
+    render(
+      <ListLinkItem href="https://custom.link" heading="Go" subHeading="There">
+        Alright
+      </ListLinkItem>
+    );
+
+    const listLinkItemElement = screen.getByTestId("list-link-item");
+    const link = listLinkItemElement.firstChild;
+    expect(link).not.toHaveClass("truncate");
+    expect(link).toHaveClass("min-w-0");
+  });
 });
 
 describe("Tests for ListItemTitle component", () => {