Add spacing to thrasher and reduce ad spacing

guardian · Dec 5, 2024 · 8f79575 · 8f79575
1 parent 4cb83ae
commit 8f79575
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 17 deletions.
diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -367,7 +367,7 @@ const mobileStickyAdStylesFullWidth = css`
 	}
 `;
 
-const extraContainerSpacingStyles = css`
+const extraContainerBottomSpacingStyles = css`
 	margin-bottom: 16px;
 `;
 
@@ -563,14 +563,7 @@ export const AdSlot = ({
 			return (
 				<div
 					className="ad-slot-container"
-					css={[
-						merchandisingAdContainerStyles,
-						containerSpacing === 'large' &&
-							extraContainerSpacingStyles,
-						css`
-							outline: green solid 1px;
-						`,
-					]}
+					css={[merchandisingAdContainerStyles]}
 				>
 					<div
 						id="dfp-ad--merchandising-high"
@@ -579,7 +572,14 @@ export const AdSlot = ({
 							'ad-slot',
 							'ad-slot--merchandising-high',
 						].join(' ')}
-						css={[merchandisingAdStyles]}
+						css={[
+							merchandisingAdStyles,
+							containerSpacing &&
+								extraContainerBottomSpacingStyles,
+							css`
+								outline: green solid 1px;
+							`,
+						]}
 						data-link-name="ad slot merchandising-high"
 						data-name="merchandising-high"
 						data-refresh="false"
@@ -616,8 +616,7 @@ export const AdSlot = ({
 					className="top-fronts-banner-ad-container"
 					css={[
 						frontsBannerAdTopContainerStyles,
-						containerSpacing === 'large' &&
-							extraContainerSpacingStyles,
+						containerSpacing && extraContainerBottomSpacingStyles,
 						css`
 							outline: hotpink solid 1px;
 						`,
@@ -756,8 +755,8 @@ export const AdSlot = ({
 						].join(' ')}
 						css={[
 							mobileFrontAdStyles,
-							containerSpacing === 'large' &&
-								extraContainerSpacingStyles,
+							containerSpacing &&
+								extraContainerBottomSpacingStyles,
 							css`
 								outline: red solid 1px;
 							`,

diff --git a/dotcom-rendering/src/components/ElementContainer.tsx b/dotcom-rendering/src/components/ElementContainer.tsx
@@ -15,7 +15,7 @@ const sidePadding = css`
 `;
 
 const bottomPadding = css`
-	padding-bottom: ${space[9]}px;
+	padding-bottom: ${space[4]}px;
 `;
 
 const sideBorderStyles = css`

diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/dotcom-rendering/src/components/FrontSection.tsx
@@ -499,7 +499,6 @@ export const FrontSection = ({
 		!!ajaxUrl &&
 		!containerLevel;
 	const showVerticalRule = !hasPageSkin;
-	console.log({ containerName, containerSpacing });
 	/**
 	 * id is being used to set the containerId in @see {ShowMore.importable.tsx}
 	 * this id pre-existed showMore so is probably also being used for something else.
@@ -517,7 +516,6 @@ export const FrontSection = ({
 					containerStylesUntilLeftCol,
 					!hasPageSkin && containerStylesFromLeftCol,
 					hasPageSkin && pageSkinContainer,
-					containerSpacing === 'large' && extraBottomPadding,
 				]}
 				style={{
 					backgroundColor: schemePalette(
@@ -608,6 +606,7 @@ export const FrontSection = ({
 						sectionContentPadded,
 						sectionBottomContent,
 						!containerLevel && bottomPadding,
+						containerSpacing === 'large' && extraBottomPadding,
 					]}
 				>
 					{isString(targetedTerritory) &&

diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -386,6 +386,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 											<Section
 												fullWidth={true}
 												padSides={false}
+												padBottom={
+													collection.containerSpacing ===
+													'large'
+												}
 												showTopBorder={false}
 												showSideBorders={false}
 												ophanComponentLink={