Ed review adjustments

Author: frederickobrien

dotcom-rendering/src/components/MostViewedRightWithAd.island.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { type ArticleFormat } from '../lib/articleFormat';
+import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { RightAdsPlaceholder } from './AdPlaceholder.apps';
 import { AdSlot } from './AdSlot.web';
 import { useConfig } from './ConfigContext';
@@ -68,7 +68,9 @@ export const MostViewedRightWithAd = ({
 				/>
 			) : null}
 
-			{!isPaidContent && !shouldHideMostViewed ? (
+			{!isPaidContent &&
+			!shouldHideMostViewed &&
+			format.design !== ArticleDesign.Interactive ? (
 				<MostViewedRightWrapper
 					maxHeightPx={MAX_HEIGHT_PX}
 					componentDataAttribute={componentDataAttribute}

dotcom-rendering/src/components/SlotBodyEnd.island.tsx

@@ -13,6 +13,7 @@ import type {
 } from '@guardian/support-dotcom-components/dist/dotcom/types';
 import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/types';
 import { useEffect, useState } from 'react';
+import { grid } from '../grid';
 import { getArticleCounts } from '../lib/articleCount';
 import {
 	BrazeBannersSystemPlacementId,
@@ -57,6 +58,10 @@ type Props = {
 
 const slotStyles = css`
 	color: ${palette.neutral[7]};
+	${grid.container};
+	& > *:first-child {
+		${grid.column.centre};
+	}
 `;
 
 const buildReaderRevenueEpicConfig = (

dotcom-rendering/src/components/SubMeta.tsx

@@ -236,12 +236,15 @@ export const SubMeta = ({
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,
-				grid.container,
-				css`
-					> * {
-						${grid.column.centre}
-					}
-				`,
+				format.design === ArticleDesign.Interactive &&
+				!isDeprecatedInteractiveLayout
+					? css`
+							${grid.container};
+							> * {
+								${grid.column.centre}
+							}
+						`
+					: undefined,
 			]}
 		>
 			<StraightLines

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -84,7 +84,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 	const interactiveLayoutSwitchoverDate = new Date('2024-06-01T00:00:00Z');
 	const publicationDate = new Date(article.webPublicationDate);
 	const isLegacyInteractive =
-		publicationDate < interactiveLayoutSwitchoverDate;
+		publicationDate < interactiveLayoutSwitchoverDate &&
+		format.design === ArticleDesign.Interactive;
 
 	const showComments = article.isCommentable && !isPaidContent;
 

dotcom-rendering/src/layouts/lib/articleArrangements.ts

@@ -171,6 +171,7 @@ const interactiveCss: LayoutCssMap = {
 		leftCol: `grid-row: 3 / span 2; ${grid.column.left};`,
 	},
 	body: {
+		mobile: `${grid.column.all};`,
 		tablet: `grid-row: 6; ${grid.column.all};`,
 		leftCol: 'grid-row: 4;',
 	},

dotcom-rendering/src/lib/ArticleRenderer.tsx

@@ -216,7 +216,9 @@ export const ArticleRenderer = ({
 			css={[
 				commercialPosition,
 				spacefinderAdStyles,
-				!isOldInteractive && interactiveLayoutCSS,
+				format.design === ArticleDesign.Interactive &&
+					!isOldInteractive &&
+					interactiveLayoutCSS,
 			]}
 		>
 			{renderingTarget === 'Apps'

dotcom-rendering/src/lib/adStyles.ts

@@ -122,6 +122,8 @@ const spacefinderAdSlotContainerStyles = css`
 		text-align: center;
 		display: flex;
 		justify-content: center;
+		// TODO: Revisit ads positioning/sizing nicely in interactive body grid
+		width: 100%;
 		max-width: 620px;
 		margin-left: 0;