From 85ed8a8b9230fc09e1ac7f4e0bb5ab12d93c7e23 Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Thu, 30 Jan 2025 15:07:22 +0000
Subject: [PATCH] Show / Hide alignment (#13252)

* tweak css so that we only add space between when there are 2 or more visible children

* Add gap sizing between section controls

* Only reserve space when there are buttons

* Add margin bottom show hide to align with nav buttons and section header
---
 dotcom-rendering/src/components/FrontSection.tsx   | 7 ++++---
 dotcom-rendering/src/components/ShowHideButton.tsx | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/dotcom-rendering/src/components/FrontSection.tsx
index 2329f00622..6edc87f2b2 100644
--- a/dotcom-rendering/src/components/FrontSection.tsx
+++ b/dotcom-rendering/src/components/FrontSection.tsx
@@ -288,8 +288,9 @@ const sectionControls = css`
 		flex-direction: column-reverse;
 		justify-content: flex-end;
 		align-items: flex-end;
-		/** we want to add space between the items in the controls section only when both items are there and visible */
-		:has(.carouselNavigationPlaceholder:not(.hidden)) {
+		gap: ${space[2]}px;
+		/* we want to add space between the items in the controls section only when there are at least 2 children and neither are hidden */
+		:has(> :not(.hidden):nth-of-type(2)) {
 			justify-content: space-between;
 		}
 	}
@@ -410,7 +411,7 @@ const secondaryLevelTopBorder = css`
 `;
 
 const carouselNavigationPlaceholder = css`
-	${until.leftCol} {
+	${between.tablet.and.leftCol} {
 		min-height: 44px;
 	}
 	.hidden & {
diff --git a/dotcom-rendering/src/components/ShowHideButton.tsx b/dotcom-rendering/src/components/ShowHideButton.tsx
index f37ac70188..ab7a5779c1 100644
--- a/dotcom-rendering/src/components/ShowHideButton.tsx
+++ b/dotcom-rendering/src/components/ShowHideButton.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { textSans14 } from '@guardian/source/foundations';
+import { space, textSans14 } from '@guardian/source/foundations';
 import { ButtonLink } from '@guardian/source/react-components';
 import { palette } from '../palette';
 
@@ -10,9 +10,9 @@ type Props = {
 
 const showHideButtonCss = css`
 	${textSans14};
-	margin-right: 10px;
+	margin-right: ${space[2]}px;
+	margin-bottom: ${space[2]}px;
 	position: relative;
-	align-items: bottom;
 	text-decoration: none;
 	&.hidden {
 		display: none;