diff --git a/web/app/[locale]/(landing)/browser/browser-download-card-action.tsx b/web/app/[locale]/(landing)/browser/browser-download-card-action.tsx index 427bef12d710..1a5443d996fa 100644 --- a/web/app/[locale]/(landing)/browser/browser-download-card-action.tsx +++ b/web/app/[locale]/(landing)/browser/browser-download-card-action.tsx @@ -36,7 +36,7 @@ export function BrowserDownloadCardAction({ className={className} style={ctaButtonStyle} > - {children} + {children} ); } @@ -47,6 +47,15 @@ export function BrowserDownloadCardAction({ className={`${className} cursor-not-allowed opacity-45`} style={ctaButtonStyle} > + {children} + + ); +} + +/** Lets long localized labels wrap inside the fixed-width landing-page cards. */ +function DownloadLabel({ children }: { children: React.ReactNode }) { + return ( + {children} ); diff --git a/web/tests/browser-download-card-action.test.tsx b/web/tests/browser-download-card-action.test.tsx index 27a2fda4a9ee..fe65463ef090 100644 --- a/web/tests/browser-download-card-action.test.tsx +++ b/web/tests/browser-download-card-action.test.tsx @@ -77,4 +77,32 @@ describe("Browser download card action", () => { expect(action.props.href).toBeUndefined(); expect(action.props.onClick).toBeUndefined(); }); + + test("wraps long labels inside fixed-width landing-page cards", () => { + const action = BrowserDownloadCardAction({ + platform: "linux", + artifact: "run-installer", + href: "/api/download/browser-nightly/linux-x64/run", + available: true, + children: "Download auto-updating installer (.run)", + }); + + if (action.type !== PlatformDownloadLink) { + throw new Error("enabled download did not render a tracked link"); + } + + const label = action.props.children as { + type: (props: { children: string }) => { + type: string; + props: { className: string; children: string }; + }; + props: { children: string }; + }; + const labelElement = label.type(label.props); + expect(labelElement.type).toBe("span"); + expect(labelElement.props.className).toContain("min-w-0"); + expect(labelElement.props.className).toContain("whitespace-normal"); + expect(labelElement.props.className).toContain("text-center"); + expect(labelElement.props.children).toBe("Download auto-updating installer (.run)"); + }); });