Merge pull request #14924 from guardian/jm/fix-cta-too-narrow

Adjust spacing and layout for collapsible banner buttons on desktop

Author: juabara

dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx

@@ -424,7 +424,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				<div
 					css={
 						isCollapsableBanner
-							? styles.closeAndCollapseButtonContainer
+							? styles.closeAndCollapseButtonContainer(
+									isCollapsed,
+									isMaybeLaterVariant,
+							  )
 							: styles.closeButtonContainer
 					}
 				>
@@ -437,9 +440,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								onClick={() =>
 									handleSetIsCollapsed(!isCollapsed)
 								}
-								cssOverrides={styles.iconOverrides(
-									templateSettings.closeButtonSettings,
-								)}
+								cssOverrides={[
+									styles.iconOverrides(
+										templateSettings.closeButtonSettings,
+									),
+								]}
 								priority="secondary"
 								icon={
 									isCollapsed ? (
@@ -679,7 +684,7 @@ const styles = {
 		${from.desktop} {
 			max-width: 980px;
 			padding: ${space[1]}px ${space[1]}px 0 ${space[3]}px;
-			grid-template-columns: auto 380px auto;
+			grid-template-columns: auto 380px minmax(100px, auto);
 			grid-template-rows: auto auto;
 
 			grid-template-areas:
@@ -743,7 +748,10 @@ const styles = {
 			padding-left: ${space[8]}px;
 		}
 	`,
-	closeAndCollapseButtonContainer: css`
+	closeAndCollapseButtonContainer: (
+		isCollapsed: boolean,
+		isMaybeLaterVariant: boolean,
+	) => css`
 		/* Layout changes only here */
 		grid-area: close-button;
 		display: flex;
@@ -761,7 +769,10 @@ const styles = {
 			margin-top: ${space[2]}px;
 		}
 		${from.desktop} {
-			margin-top: ${space[5]}px;
+			flex-direction: ${isCollapsed ? 'row' : 'row-reverse'};
+			margin-top: ${isCollapsed && isMaybeLaterVariant
+				? space[9]
+				: space[6]}px;
 		}
 
 		.maybe-later & {
@@ -940,6 +951,7 @@ const styles = {
 		}
 		${from.desktop} {
 			justify-self: end;
+			padding-right: ${space[8]}px;
 			width: 299px;
 		}
 		${between.desktop.and.wide} {
@@ -976,7 +988,7 @@ const styles = {
 		.maybe-later & {
 			flex-direction: row;
 			flex-wrap: wrap;
-			padding: ${space[3]}px;
+			padding: ${space[3]}px 0;
 		}
 
 		${until.phablet} {
@@ -1052,7 +1064,7 @@ const styles = {
 	collapsableButtonContainer: css`
 		margin-left: ${space[2]}px;
 		${from.desktop} {
-			margin-top: ${space[1]}px;
+			margin: 0;
 		}
 	`,
 	iconOverrides: (ctaSettings?: CtaSettings) => css`
@@ -1063,6 +1075,10 @@ const styles = {
 		}
 		margin-top: ${space[1]}px;
 		margin-right: ${space[1]}px;
+
+		${from.desktop} {
+			margin: 0;
+		}
 	`,
 };