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" : ""
)}>
@@ -112,9 +112,8 @@ export function ListLinkItem(props: ListLinkItemProps) {
)}
-
- {subHeading.substring(0, 100)}
- {subHeading.length > 100 && "..."}
+
+ {subHeading}
{children}
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(
+
+ Alright
+
+ );
+
+ 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(
+
+ Alright
+
+ );
+
+ 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", () => {