Text wrap for product button (#14245)

* set max width and make the product button text wrap

Author: oliverabrahams

dotcom-rendering/src/components/ProductLinkButton.stories.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ProductLinkButton } from './ProductLinkButton';
 
@@ -6,7 +7,15 @@ const meta = {
 	title: 'Components/ProductLinkButton',
 	parameters: {
 		layout: 'padded',
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.leftCol,
+				breakpoints.wide,
+			],
+		},
 	},
+
 	args: {
 		label: '£6.50 for 350g at Ollie’s Kimchi',
 		url: 'https://ollieskimchi.co.uk/shop/ols/products/ollies-kimchi',
@@ -18,3 +27,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default = {} satisfies Story;
+
+export const WithLongLabel = {
+	args: {
+		label: '£10.99 for a 5 x 5 x 50cm sheet at Amazon',
+	},
+} satisfies Story;

dotcom-rendering/src/components/ProductLinkButton.tsx

@@ -1,3 +1,5 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
 import {
 	LinkButton,
 	SvgArrowRightStraight,
@@ -8,6 +10,15 @@ type ProductLinkButtonProps = {
 	url: string;
 };
 
+const linkButtonStyles = css`
+	max-width: 100%;
+	height: fit-content;
+	padding-top: ${space[1]}px;
+	padding-bottom: ${space[1]}px;
+	white-space: normal;
+	overflow-wrap: break-word;
+`;
+
 export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
 	return (
 		<LinkButton
@@ -20,6 +31,7 @@ export const ProductLinkButton = ({ label, url }: ProductLinkButtonProps) => {
 			data-ignore="global-link-styling"
 			data-link-name="in body link"
 			data-spacefinder-role="inline"
+			cssOverrides={[linkButtonStyles]}
 		>
 			{label}
 		</LinkButton>