Merge pull request #14480 from guardian/tf-wrap-ctas

juabara · web-flow · commit 37d0ded697d0 · 2025-09-04T13:41:02.000+01:00
Wrap banner ctas if too narrow
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -972,6 +972,7 @@ const styles = {
 
 		.maybe-later & {
 			flex-direction: row;
+			flex-wrap: wrap;
 			padding: ${space[3]}px;
 		}
 
@@ -987,7 +988,7 @@ const styles = {
 			margin-left: -${space[3]}px;
 
 			a {
-				width: calc(100% - 24px);
+				flex: 1 1 0;
 			}
 		}
 
@@ -1031,7 +1032,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
`@@ -972,6 +972,7 @@ const styles = {`
`972`	`972`
`973`	`973`	`.maybe-later & {`
`974`	`974`	`flex-direction: row;`
	`975`	`+ flex-wrap: wrap;`
`975`	`976`	`padding: ${space[3]}px;`
`976`	`977`	`}`
`977`	`978`
`@@ -987,7 +988,7 @@ const styles = {`
`987`	`988`	`margin-left: -${space[3]}px;`
`988`	`989`
`989`	`990`	`a {`
`990`		`- width: calc(100% - 24px);`
	`991`	`+ flex: 1 1 0;`
`991`	`992`	`}`
`992`	`993`	`}`
`993`	`994`
`@@ -1031,7 +1032,7 @@ const styles = {`
`1031`	`1032`	`margin-bottom: ${space[2]}px;`
`1032`	`1033`	`,
`1033`	`1034`	maybeLaterButtonSizing: css`
`1034`		`- width: 142px;`
	`1035`	`+ flex: 1 1 0;`
`1035`	`1036`	`${from.desktop} {`
`1036`	`1037`	`width: 118px;`
`1037`	`1038`	`}`