Test reserving 250px for top-above-nav (#14198)

Jakeii · web-flow · commit 5e8d9b2ff423 · 2025-07-14T10:03:31.000+01:00
diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -47,6 +47,7 @@ type DefaultProps = {
 	display?: ArticleDisplay;
 	isPaidContent?: boolean;
 	hasPageskin?: boolean;
+	isIn250ReservationVariant?: boolean;
 };
 
 // for dark ad labels
@@ -106,12 +107,29 @@ const hideBelowDesktop = css`
 	}
 `;
 
+const containerMinHeight = getMinHeight(250, space[5]);
+
 const topAboveNavContainerStyles = css`
-	padding-bottom: 18px;
+	padding-bottom: ${space[5]}px;
+	position: relative;
+	margin: 0 auto;
+	text-align: left;
+	display: block;
+`;
+
+const topAboveNavContainerVaraintStyles = css`
+	padding-bottom: ${space[5]}px;
 	position: relative;
 	margin: 0 auto;
 	text-align: left;
 	display: block;
+	width: 100%;
+	min-height: ${containerMinHeight}px;
+
+	/* Remove the min-height when the ad has rendered, so that the container can shrink if the ad is smaller */
+	&[top-above-nav-ad-rendered='true'] {
+		min-height: auto;
+	}
 `;
 
 /**
@@ -412,6 +430,7 @@ export const AdSlot = ({
 	index,
 	hasPageskin = false,
 	shouldHideReaderRevenue = false,
+	isIn250ReservationVariant,
 }: Props) => {
 	switch (position) {
 		case 'right':
@@ -590,7 +609,13 @@ export const AdSlot = ({
 		}
 		case 'top-above-nav': {
 			return (
-				<AdSlotWrapper css={topAboveNavContainerStyles}>
+				<AdSlotWrapper
+					css={
+						isIn250ReservationVariant
+							? topAboveNavContainerVaraintStyles
+							: topAboveNavContainerStyles
+					}
+				>
 					<div
 						id="dfp-ad--top-above-nav"
 						className={[
diff --git a/dotcom-rendering/src/components/HeaderAdSlot.tsx b/dotcom-rendering/src/components/HeaderAdSlot.tsx
@@ -2,6 +2,7 @@ import { css, Global } from '@emotion/react';
 import { adSizes, constants } from '@guardian/commercial';
 import { space } from '@guardian/source/foundations';
 import { palette } from '../palette';
+import type { ServerSideTests } from '../types/config';
 import { AdBlockAsk } from './AdBlockAsk.importable';
 import { AdSlot } from './AdSlot.web';
 import { Hide } from './Hide';
@@ -18,12 +19,26 @@ const borderBottomHeight = 1;
 const headerMinHeight =
 	TOP_ABOVE_NAV_HEIGHT + padding + AD_LABEL_HEIGHT + borderBottomHeight;
 
-const headerAdWrapper = css`
+const headerAdWrapperStylesVariant = css`
+	z-index: 1080;
+	width: 100%;
+	background-color: ${palette('--ad-background')};
+	border-bottom: 1px solid ${palette('--ad-border')};
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
+	position: sticky;
+	top: 0;
+`;
+
+const headerAdWrapperStylesControl = css`
 	z-index: 1080;
 	width: 100%;
 	background-color: ${palette('--ad-background')};
 	min-height: ${headerMinHeight}px;
-	border-bottom: ${borderBottomHeight}px solid ${palette('--ad-border')};
+	border-bottom: 1px solid ${palette('--ad-border')};
 
 	display: flex;
 	flex-direction: column;
@@ -44,38 +59,60 @@ const headerMinSizeStyles = css`
 export const HeaderAdSlot = ({
 	shouldHideReaderRevenue,
 	isPaidContent,
+	abTests,
 }: {
 	shouldHideReaderRevenue: boolean;
 	isPaidContent: boolean;
-}) => (
-	<div css={headerWrapper}>
-		<Global
-			styles={css`
-				/**
+	abTests: ServerSideTests;
+}) => {
+	const isIn250ReservationVariant =
+		abTests.topAboveNav250ReservationVariant === 'variant';
+	return (
+		<div css={headerWrapper}>
+			<Global
+				styles={css`
+					/**
 				* Hides the top-above-nav ad-slot container when a
 				* Bonzai TrueSkin (Australian 3rd Party page skin) is shown
 				*/
-				.bz-custom-container
-					~ #bannerandheader
-					.top-banner-ad-container {
-					display: none;
-				}
-			`}
-		/>
-		<Hide when="below" breakpoint="tablet">
-			<div css={[headerAdWrapper]} className="top-banner-ad-container">
-				<div css={headerMinSizeStyles}>
-					<Island priority="feature" defer={{ until: 'visible' }}>
-						<AdBlockAsk
-							size="leaderboard"
-							slotId="dfp-ad--top-above-nav"
-							shouldHideReaderRevenue={shouldHideReaderRevenue}
-							isPaidContent={isPaidContent}
+					.bz-custom-container
+						~ #bannerandheader
+						.top-banner-ad-container {
+						display: none;
+					}
+				`}
+			/>
+			<Hide when="below" breakpoint="tablet">
+				<div
+					css={[
+						isIn250ReservationVariant
+							? headerAdWrapperStylesVariant
+							: headerAdWrapperStylesControl,
+					]}
+					className="top-banner-ad-container"
+				>
+					<div
+						css={!isIn250ReservationVariant && headerMinSizeStyles}
+					>
+						<Island priority="feature" defer={{ until: 'visible' }}>
+							<AdBlockAsk
+								size="leaderboard"
+								slotId="dfp-ad--top-above-nav"
+								shouldHideReaderRevenue={
+									shouldHideReaderRevenue
+								}
+								isPaidContent={isPaidContent}
+							/>
+						</Island>
+						<AdSlot
+							position="top-above-nav"
+							isIn250ReservationVariant={
+								isIn250ReservationVariant
+							}
 						/>
-					</Island>
-					<AdSlot position="top-above-nav" />
+					</div>
 				</div>
-			</div>
-		</Hide>
-	</div>
-);
+			</Hide>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
@@ -173,6 +173,7 @@ export const AudioLayout = (props: WebProps) => {
 								shouldHideReaderRevenue={
 									!!article.config.shouldHideReaderRevenue
 								}
+								abTests={article.config.abTests}
 							/>
 						</Section>
 					</Stuck>
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -325,6 +325,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 									shouldHideReaderRevenue={
 										!!article.config.shouldHideReaderRevenue
 									}
+									abTests={article.config.abTests}
 								/>
 							</Section>
 						</Stuck>
diff --git a/dotcom-rendering/src/layouts/CrosswordLayout.tsx b/dotcom-rendering/src/layouts/CrosswordLayout.tsx
@@ -145,6 +145,7 @@ export const CrosswordLayout = (props: Props) => {
 									shouldHideReaderRevenue={
 										!!article.config.shouldHideReaderRevenue
 									}
+									abTests={article.config.abTests}
 								/>
 							</Section>
 						</div>
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -202,6 +202,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 							<HeaderAdSlot
 								isPaidContent={!!front.config.isPaidContent}
 								shouldHideReaderRevenue={false}
+								abTests={front.config.abTests}
 							/>
 						</Section>
 					</Stuck>
diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
@@ -174,6 +174,7 @@ const NavHeader = ({ article, NAV, format, renderAds }: HeaderProps) => {
 								shouldHideReaderRevenue={
 									!!article.config.shouldHideReaderRevenue
 								}
+								abTests={article.config.abTests}
 							/>
 						</Section>
 					</div>
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -280,6 +280,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 												!!article.config
 													.shouldHideReaderRevenue
 											}
+											abTests={article.config.abTests}
 										/>
 									</Section>
 								</div>
diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx
@@ -316,6 +316,7 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 									shouldHideReaderRevenue={
 										!!article.config.shouldHideReaderRevenue
 									}
+									abTests={article.config.abTests}
 								/>
 							</Section>
 						</Stuck>
diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
@@ -232,6 +232,7 @@ export const NewsletterSignupLayout = ({
 								shouldHideReaderRevenue={
 									!!article.config.shouldHideReaderRevenue
 								}
+								abTests={article.config.abTests}
 							/>
 						</Section>
 					</Stuck>
diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
@@ -299,6 +299,7 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 									shouldHideReaderRevenue={
 										!!article.config.shouldHideReaderRevenue
 									}
+									abTests={article.config.abTests}
 								/>
 							</Section>
 						</Stuck>
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -272,6 +272,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 												!!article.config
 													.shouldHideReaderRevenue
 											}
+											abTests={article.config.abTests}
 										/>
 									</Section>
 								</Stuck>
@@ -317,6 +318,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 													!!article.config
 														.shouldHideReaderRevenue
 												}
+												abTests={article.config.abTests}
 											/>
 										</Section>
 									</Stuck>
diff --git a/dotcom-rendering/src/layouts/SportDataPageLayout.tsx b/dotcom-rendering/src/layouts/SportDataPageLayout.tsx
@@ -96,6 +96,7 @@ export const SportDataPageLayout = ({ sportData }: Props) => {
 							<HeaderAdSlot
 								isPaidContent={!!sportData.config.isPaidContent}
 								shouldHideReaderRevenue={false}
+								abTests={sportData.config.abTests}
 							/>
 						</Section>
 					</Stuck>
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -413,6 +413,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 									shouldHideReaderRevenue={
 										!!article.config.shouldHideReaderRevenue
 									}
+									abTests={article.config.abTests}
 								/>
 							</Section>
 						</Stuck>
diff --git a/dotcom-rendering/src/layouts/TagPageLayout.tsx b/dotcom-rendering/src/layouts/TagPageLayout.tsx
@@ -80,6 +80,7 @@ export const TagPageLayout = ({ tagPage, NAV }: Props) => {
 							<HeaderAdSlot
 								isPaidContent={!!tagPage.config.isPaidContent}
 								shouldHideReaderRevenue={false}
+								abTests={tagPage.config.abTests}
 							/>
 						</Section>
 					</Stuck>
diff --git a/dotcom-rendering/src/lib/adStyles.ts b/dotcom-rendering/src/lib/adStyles.ts
@@ -99,6 +99,10 @@ const adSlotStyles = css`
 			margin: 0;
 			overflow: visible;
 			width: 100%;
+
+			&[data-label-show='true'] {
+				min-height: calc(250px + ${labelHeight}px);
+			}
 		}
 	}
 `;

Original file line number	Diff line number	Diff line change
`@@ -173,6 +173,7 @@ export const AudioLayout = (props: WebProps) => {`
`173`	`173`	`shouldHideReaderRevenue={`
`174`	`174`	`!!article.config.shouldHideReaderRevenue`
`175`	`175`	`}`
	`176`	`+ abTests={article.config.abTests}`
`176`	`177`	`/>`
`177`	`178`	`</Section>`
`178`	`179`	`</Stuck>`
Original file line number	Diff line number	Diff line change
`@@ -325,6 +325,7 @@ export const CommentLayout = (props: WebProps \| AppsProps) => {`
`325`	`325`	`shouldHideReaderRevenue={`
`326`	`326`	`!!article.config.shouldHideReaderRevenue`
`327`	`327`	`}`
	`328`	`+ abTests={article.config.abTests}`
`328`	`329`	`/>`
`329`	`330`	`</Section>`
`330`	`331`	`</Stuck>`
Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,7 @@ export const CrosswordLayout = (props: Props) => {`
`145`	`145`	`shouldHideReaderRevenue={`
`146`	`146`	`!!article.config.shouldHideReaderRevenue`
`147`	`147`	`}`
	`148`	`+ abTests={article.config.abTests}`
`148`	`149`	`/>`
`149`	`150`	`</Section>`
`150`	`151`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -174,6 +174,7 @@ const NavHeader = ({ article, NAV, format, renderAds }: HeaderProps) => {`
`174`	`174`	`shouldHideReaderRevenue={`
`175`	`175`	`!!article.config.shouldHideReaderRevenue`
`176`	`176`	`}`
	`177`	`+ abTests={article.config.abTests}`
`177`	`178`	`/>`
`178`	`179`	`</Section>`
`179`	`180`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -280,6 +280,7 @@ export const InteractiveLayout = (props: WebProps \| AppsProps) => {`
`280`	`280`	`!!article.config`
`281`	`281`	`.shouldHideReaderRevenue`
`282`	`282`	`}`
	`283`	`+ abTests={article.config.abTests}`
`283`	`284`	`/>`
`284`	`285`	`</Section>`
`285`	`286`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -316,6 +316,7 @@ export const LiveLayout = (props: WebProps \| AppsProps) => {`
`316`	`316`	`shouldHideReaderRevenue={`
`317`	`317`	`!!article.config.shouldHideReaderRevenue`
`318`	`318`	`}`
	`319`	`+ abTests={article.config.abTests}`
`319`	`320`	`/>`
`320`	`321`	`</Section>`
`321`	`322`	`</Stuck>`
Original file line number	Diff line number	Diff line change
`@@ -232,6 +232,7 @@ export const NewsletterSignupLayout = ({`
`232`	`232`	`shouldHideReaderRevenue={`
`233`	`233`	`!!article.config.shouldHideReaderRevenue`
`234`	`234`	`}`
	`235`	`+ abTests={article.config.abTests}`
`235`	`236`	`/>`
`236`	`237`	`</Section>`
`237`	`238`	`</Stuck>`