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

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>

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", () => {