Wrap banner ctas if too narrow

tomrf1 · tomrf1 · commit 418de614c4d4 · 2025-09-04T13:35:13.000+01:00
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -978,6 +978,7 @@ const styles = {
 
 		.maybe-later & {
 			flex-direction: row;
+			flex-wrap: wrap;
 			padding: ${space[3]}px;
 		}
 
@@ -993,7 +994,7 @@ const styles = {
 			margin-left: -${space[3]}px;
 
 			a {
-				width: calc(100% - 24px);
+				flex: 1 1 0;
 			}
 		}
 
@@ -1037,7 +1038,7 @@ const styles = {
 		margin-bottom: ${space[2]}px;
 	`,
 	maybeLaterButtonSizing: css`
-		width: 142px;
+		flex: 1 1 0;
 		${from.desktop} {
 			width: 118px;
 		}

Original file line number	Diff line number	Diff line change
`@@ -978,6 +978,7 @@ const styles = {`
`978`	`978`
`979`	`979`	`.maybe-later & {`
`980`	`980`	`flex-direction: row;`
	`981`	`+ flex-wrap: wrap;`
`981`	`982`	`padding: ${space[3]}px;`
`982`	`983`	`}`
`983`	`984`
`@@ -993,7 +994,7 @@ const styles = {`
`993`	`994`	`margin-left: -${space[3]}px;`
`994`	`995`
`995`	`996`	`a {`
`996`		`- width: calc(100% - 24px);`
	`997`	`+ flex: 1 1 0;`
`997`	`998`	`}`
`998`	`999`	`}`
`999`	`1000`
`@@ -1037,7 +1038,7 @@ const styles = {`
`1037`	`1038`	`margin-bottom: ${space[2]}px;`
`1038`	`1039`	`,
`1039`	`1040`	maybeLaterButtonSizing: css`
`1040`		`- width: 142px;`
	`1041`	`+ flex: 1 1 0;`
`1041`	`1042`	`${from.desktop} {`
`1042`	`1043`	`width: 118px;`
`1043`	`1044`	`}`