diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx index 3d11ac25d99..d34a797a061 100644 --- a/dotcom-rendering/src/components/AdSlot.web.tsx +++ b/dotcom-rendering/src/components/AdSlot.web.tsx @@ -10,7 +10,6 @@ import { until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; -import type { FEArticle } from '../frontend/feArticle'; import { labelBoxStyles, labelHeight, labelStyles } from '../lib/adStyles'; import { ArticleDisplay } from '../lib/articleFormat'; import { center as layoutCenterStyles } from '../lib/center'; @@ -350,16 +349,19 @@ const liveBlogTopContainerStyles = css` `; const mobileStickyAdStyles = css` + z-index: ${getZIndex('mobileSticky')}; position: fixed; bottom: 0; - width: 320px; + width: 100%; margin: 0 auto; right: 0; left: 0; - z-index: ${getZIndex('mobileSticky')}; + text-align: center; + background-color: ${schemedPalette('--ad-background')}; ${from.phablet} { display: none; } + .ad-slot__close-button { display: none; position: absolute; @@ -402,15 +404,6 @@ const mobileStickyAdStyles = css` display: block; position: relative; ${labelBoxStyles} - } -`; - -const mobileStickyAdStylesFullWidth = css` - width: 100%; - text-align: center; - background-color: ${palette.neutral[97]}; - - .ad-slot[data-label-show='true']::before { padding-left: calc((100% - ${adSizes.mobilesticky.width}px) / 2); padding-right: calc((100% - ${adSizes.mobilesticky.width}px) / 2); } @@ -990,22 +983,6 @@ export const AdSlot = ({ } }; -type MobileStickyContainerProps = Pick; - -export const MobileStickyContainer = ({ - contentType, - pageId, -}: MobileStickyContainerProps) => { - return ( -
- ); -}; +export const MobileStickyContainer = () => ( +
+); diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx index c0e8918f1f2..94aebed7489 100644 --- a/dotcom-rendering/src/layouts/AudioLayout.tsx +++ b/dotcom-rendering/src/layouts/AudioLayout.tsx @@ -734,11 +734,9 @@ export const AudioLayout = (props: WebProps | AppProps) => { /> - + {renderAds && ( + + )} )} {isApps && ( diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 96c724fc5f2..96e11c49bd2 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -918,10 +918,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => { /> - + {renderAds && ( + + )} )} {isApps && ( diff --git a/dotcom-rendering/src/layouts/CrosswordLayout.tsx b/dotcom-rendering/src/layouts/CrosswordLayout.tsx index 4d00b8bb68e..c58724e4a1e 100644 --- a/dotcom-rendering/src/layouts/CrosswordLayout.tsx +++ b/dotcom-rendering/src/layouts/CrosswordLayout.tsx @@ -513,11 +513,7 @@ export const CrosswordLayout = (props: Props) => { /> - + {renderAds && } ); }; diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx index ee2db3e4b95..2322ffb5168 100644 --- a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx @@ -367,10 +367,9 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => { /> - + {renderAds && ( + + )} )} diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index 2ed4cb49eb7..896dd0547e0 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -1001,10 +1001,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { {renderAds && ( - + )} )} diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 0fc4f979ba4..442be07969b 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -810,11 +810,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { /> - + {renderAds && ( + + )} )} {isApps && ( diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx index 1195e8f62df..aa236c351a2 100644 --- a/dotcom-rendering/src/layouts/LiveLayout.tsx +++ b/dotcom-rendering/src/layouts/LiveLayout.tsx @@ -1110,11 +1110,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => { /> - + {renderAds && ( + + )} )} diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx index ee0b59a2e1e..f44518ab711 100644 --- a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx +++ b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx @@ -489,11 +489,7 @@ export const NewsletterSignupLayout = ({ - + {renderAds && } ); }; diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx index c9c84eed4bc..8a2395bdc4b 100644 --- a/dotcom-rendering/src/layouts/PictureLayout.tsx +++ b/dotcom-rendering/src/layouts/PictureLayout.tsx @@ -763,10 +763,9 @@ export const PictureLayout = (props: WebProps | AppsProps) => { /> - + {renderAds && ( + + )} )} {isApps && ( diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 78d86de2e1c..8596854d66a 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -816,11 +816,9 @@ export const StandardLayout = (props: WebProps | AppProps) => { /> - + {renderAds && ( + + )} )}