Skip to content

Reserve 90px space for top-above-nav advert on tablet #16282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
domlander wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Reserve 90px space for top-above-nav advert on tablet #16282

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3136839
refactor: rename function, use ad size constants instead of numbers
domlander Jun 29, 2026
11b4ea4
Reserve 90px ad space for top-above-nav on tablet
domlander Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 44 additions & 21 deletions dotcom-rendering/src/components/AdSlot.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,11 @@ type Props = DefaultProps &

const halfPageAdHeight = adSizes.halfPage.height;

/** Calculates the minimum height for an ad slot. Used to avoid CLS */
const getMinHeight = (adHeight: number, padding?: number): number =>
/**
* Calculates the minimum height for an ad slot. Assumes an ad label of
* fixed height will be present above the advert. Used to avoid CLS.
*/
const getMinHeightOfAdSlot = (adHeight: number, padding?: number): number =>
adHeight + labelHeight + (padding ?? 0);

const outOfPageStyles = css`
Expand All @@ -105,7 +108,7 @@ const hideBelowDesktop = css`
}
`;

const containerMinHeight = getMinHeight(250, space[5]);
const topAboveNavPaddingHeight = space[5];

const topAboveNavContainerStyles = css`
padding-bottom: ${space[5]}px;
Expand All @@ -114,7 +117,17 @@ const topAboveNavContainerStyles = css`
text-align: left;
display: block;
width: 100%;
min-height: ${containerMinHeight}px;

min-height: ${getMinHeightOfAdSlot(
adSizes.leaderboard.height,
topAboveNavPaddingHeight,
)}px;
${from.desktop} {
min-height: ${getMinHeightOfAdSlot(
adSizes.billboard.height,
topAboveNavPaddingHeight,
)}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'] {
Expand All @@ -126,16 +139,17 @@ const topAboveNavContainerStyles = css`
::before {
content: '';
position: absolute;
height: 250px;
width: 728px;
height: ${adSizes.leaderboard.height}px;
width: ${adSizes.leaderboard.width}px;
top: ${labelHeight}px;
left: 50%;
transform: translateX(-50%);
background-color: ${palette.neutral[93]};
}
${from.desktop} {
::before {
width: 970px;
height: ${adSizes.billboard.height}px;
width: ${adSizes.billboard.width}px;
}
}
}
Expand All @@ -148,7 +162,7 @@ const topAboveNavContainerStyles = css`
* render first, we need to reserve space for the ad to avoid CLS.
*/
const showcaseRightColumnContainerStyles = css`
min-height: ${getMinHeight(halfPageAdHeight)}px;
min-height: ${getMinHeightOfAdSlot(halfPageAdHeight)}px;
`;

const showcaseRightColumnStyles = css`
Expand Down Expand Up @@ -178,7 +192,7 @@ const allowFullWidthAdContainerStyles = css`

const merchandisingAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.billboard.height, space[3])}px;
min-height: ${getMinHeightOfAdSlot(adSizes.billboard.height, space[3])}px;
margin: ${space[3]}px auto;
max-width: ${breakpoints['wide']}px;
overflow: hidden;
Expand All @@ -187,7 +201,10 @@ const merchandisingAdStyles = css`
${from.desktop} {
margin: 0;
padding-bottom: ${space[5]}px;
min-height: ${getMinHeight(adSizes.billboard.height, space[5])}px;
min-height: ${getMinHeightOfAdSlot(
adSizes.billboard.height,
space[5],
)}px;
}

&:not(.ad-slot--fluid).ad-slot--rendered {
Expand Down Expand Up @@ -220,7 +237,7 @@ const liveblogInlineContainerStyles = css`

const liveblogInlineAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.mpu.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height)}px;
background-color: ${schemedPalette('--ad-background-article-inner')};

${until.tablet} {
Expand All @@ -230,7 +247,7 @@ const liveblogInlineAdStyles = css`

const liveblogInlineMobileAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.outstreamMobile.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.outstreamMobile.height)}px;

${from.tablet} {
display: none;
Expand All @@ -239,7 +256,7 @@ const liveblogInlineMobileAdStyles = css`

const mobileFrontAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.mpu.height, space[3])}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height, space[3])}px;
min-width: 300px;
width: 300px;
margin: ${space[3]}px auto;
Expand All @@ -255,11 +272,17 @@ const frontsBannerAdTopContainerStyles = css`
${from.tablet} {
display: flex;
justify-content: center;
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
min-height: ${getMinHeightOfAdSlot(
adSizes.leaderboard.height,
space[6],
)}px;
background-color: ${schemedPalette('--ad-background')};
}
${from.desktop} {
min-height: ${getMinHeight(adSizes.billboard.height, space[6])}px;
min-height: ${getMinHeightOfAdSlot(
adSizes.billboard.height,
space[6],
)}px;
}
`;

Expand All @@ -277,7 +300,7 @@ const frontsBannerCollapseStyles = css`

const frontsBannerAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
min-height: ${getMinHeightOfAdSlot(adSizes.leaderboard.height, space[6])}px;
max-width: ${adSizes.leaderboard.width}px;
overflow: hidden;
padding-bottom: ${space[6]}px;
Expand All @@ -300,7 +323,7 @@ const articleEndAdStyles = css`

const mostPopAdStyles = css`
position: relative;
min-height: ${getMinHeight(adSizes.mpu.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height)}px;
min-width: ${adSizes.mpu.width}px;
max-width: ${adSizes.mpu.width}px;
text-align: center;
Expand All @@ -314,7 +337,7 @@ const mostPopAdStyles = css`
`;

const mostPopContainerStyles = css`
min-height: ${getMinHeight(adSizes.mpu.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height)}px;
min-width: ${adSizes.mpu.width}px;
width: fit-content;
max-width: ${adSizes.mpu.width}px;
Expand All @@ -328,7 +351,7 @@ const mostPopContainerStyles = css`
`;

const liveBlogTopAdStyles = css`
min-height: ${getMinHeight(adSizes.mpu.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height)}px;
min-width: ${adSizes.mpu.width}px;
width: fit-content;
max-width: ${adSizes.mpu.width}px;
Expand Down Expand Up @@ -409,12 +432,12 @@ const mobileStickyAdStyles = css`
`;

const crosswordBannerMobileAdStyles = css`
min-height: ${getMinHeight(adSizes.mobilesticky.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mobilesticky.height)}px;
`;

const galleryInlineAdStyles = css`
margin: ${space[3]}px auto;
min-height: ${getMinHeight(adSizes.mpu.height)}px;
min-height: ${getMinHeightOfAdSlot(adSizes.mpu.height)}px;

&.ad-slot--fluid {
margin: ${space[3]}px auto;
Expand Down
Loading