From 44a1cfe4235ee74aebf02810eebfc5a74a23ba4e Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Tue, 25 Nov 2025 15:27:53 +0000
Subject: [PATCH] fix: adjust spacing and layout for collapsible banner buttons
 on desktop

Refine desktop layout for maybe-later variant: reverse button order when expanded, adjust margins and padding, update grid column sizing, and ensure consistent spacing across button containers.
---
 .../designableBanner/DesignableBanner.tsx     | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
index 206ee3e6c40..e2a90c6beef 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
@@ -422,7 +422,10 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 				<div
 					css={
 						isCollapsableBanner
-							? styles.closeAndCollapseButtonContainer
+							? styles.closeAndCollapseButtonContainer(
+									isCollapsed,
+									isMaybeLaterVariant,
+							  )
 							: styles.closeButtonContainer
 					}
 				>
@@ -435,9 +438,11 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
 								onClick={() =>
 									handleSetIsCollapsed(!isCollapsed)
 								}
-								cssOverrides={styles.iconOverrides(
-									templateSettings.closeButtonSettings,
-								)}
+								cssOverrides={[
+									styles.iconOverrides(
+										templateSettings.closeButtonSettings,
+									),
+								]}
 								priority="secondary"
 								icon={
 									isCollapsed ? (
@@ -677,7 +682,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:
@@ -741,7 +746,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;
@@ -759,7 +767,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 & {
@@ -938,6 +949,7 @@ const styles = {
 		}
 		${from.desktop} {
 			justify-self: end;
+			padding-right: ${space[8]}px;
 			width: 299px;
 		}
 		${between.desktop.and.wide} {
@@ -974,7 +986,7 @@ const styles = {
 		.maybe-later & {
 			flex-direction: row;
 			flex-wrap: wrap;
-			padding: ${space[3]}px;
+			padding: ${space[3]}px 0;
 		}
 
 		${until.phablet} {
@@ -1050,7 +1062,7 @@ const styles = {
 	collapsableButtonContainer: css`
 		margin-left: ${space[2]}px;
 		${from.desktop} {
-			margin-top: ${space[1]}px;
+			margin: 0;
 		}
 	`,
 	iconOverrides: (ctaSettings?: CtaSettings) => css`
@@ -1061,6 +1073,10 @@ const styles = {
 		}
 		margin-top: ${space[1]}px;
 		margin-right: ${space[1]}px;
+
+		${from.desktop} {
+			margin: 0;
+		}
 	`,
 };