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)");
+ });
});