Roll back full width body experiment for interactive grid

dotcom-rendering/src/components/Figure.tsx

@@ -22,6 +22,58 @@ type Props = {
 	articleArrangement?: LayoutType;
 };
 
+const fullWidthCss = ({
+	leftColMaxWidth,
+	wideMaxWidth,
+}: {
+	leftColMaxWidth: number;
+	wideMaxWidth: number;
+}) => css`
+	margin-top: ${space[3]}px;
+	margin-bottom: ${space[3]}px;
+
+	${until.tablet} {
+		margin-left: -20px;
+		margin-right: -20px;
+	}
+	${until.mobileLandscape} {
+		margin-left: -10px;
+		margin-right: -10px;
+	}
+	${from.tablet} {
+		--scrollbar-width-fallback: 15px;
+		--half-scrollbar-width-fallback: 7.5px;
+
+		width: calc(
+			100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
+		);
+		max-width: calc(
+			100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
+		);
+
+		--grid-container-max-width: 740px;
+		--grid-container-left-margin: calc(
+			((-100vw + (var(--grid-container-max-width) - 42px)) / 2) +
+				var(
+					--half-scrollbar-width,
+					var(--half-scrollbar-width-fallback)
+				)
+		);
+		margin-left: var(--grid-container-left-margin);
+	}
+	${from.desktop} {
+		--grid-container-max-width: ${breakpoints.desktop}px;
+	}
+	${from.leftCol} {
+		--grid-container-max-width: ${leftColMaxWidth}px;
+		--grid-left-col-width: 140px;
+	}
+	${from.wide} {
+		--grid-container-max-width: ${wideMaxWidth}px;
+		--grid-left-col-width: 219px;
+	}
+`;
+
 const roleCss = {
 	inline: css`
 		margin-top: ${space[3]}px;
@@ -78,59 +130,15 @@ const roleCss = {
 		}
 	`,
 
-	fullWidth: css`
-		margin-top: ${space[3]}px;
-		margin-bottom: ${space[3]}px;
-
-		grid-column: 1 / -1;
-	`,
+	fullWidth: fullWidthCss({
+		leftColMaxWidth: 824,
+		wideMaxWidth: 824,
+	}),
 
-	fullWidthDeprecated: css`
-		margin-top: ${space[3]}px;
-		margin-bottom: ${space[3]}px;
-
-		${until.tablet} {
-			margin-left: -20px;
-			margin-right: -20px;
-		}
-		${until.mobileLandscape} {
-			margin-left: -10px;
-			margin-right: -10px;
-		}
-		${from.tablet} {
-			--scrollbar-width-fallback: 15px;
-			--half-scrollbar-width-fallback: 7.5px;
-
-			width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-			max-width: calc(
-				100vw - var(--scrollbar-width, var(--scrollbar-width-fallback))
-			);
-
-			--grid-container-max-width: 740px;
-			--grid-container-left-margin: calc(
-				((-100vw + (var(--grid-container-max-width) - 42px)) / 2) +
-					var(
-						--half-scrollbar-width,
-						var(--half-scrollbar-width-fallback)
-					)
-			);
-
-			margin-left: var(--grid-container-left-margin);
-		}
-		${from.desktop} {
-			--grid-container-max-width: ${breakpoints.desktop}px;
-		}
-		${from.leftCol} {
-			--grid-container-max-width: ${breakpoints.leftCol}px;
-			--grid-left-col-width: 140px;
-		}
-		${from.wide} {
-			--grid-container-max-width: ${breakpoints.wide}px;
-			--grid-left-col-width: 219px;
-		}
-	`,
+	fullWidthDeprecated: fullWidthCss({
+		leftColMaxWidth: breakpoints.leftCol,
+		wideMaxWidth: breakpoints.wide,
+	}),
 
 	showcase: css`
 		margin-top: ${space[3]}px;
@@ -225,10 +233,9 @@ export const defaultRoleStyles = (
 		case 'immersive':
 			return roleCss.immersive;
 		case 'fullWidth':
-			if (isInDeprecatedInteractiveLayout) {
-				return roleCss.fullWidthDeprecated;
-			}
-			return roleCss.fullWidth;
+			return isInDeprecatedInteractiveLayout
+				? roleCss.fullWidthDeprecated
+				: roleCss.fullWidth;
 		case 'showcase':
 			if (isTimeline) {
 				return css`

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

@@ -13,7 +13,6 @@ 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,
@@ -53,19 +52,11 @@ type Props = {
 	isLabs: boolean;
 	articleEndSlot: boolean;
 	isSensitive: boolean;
-	isInInteractive?: boolean;
 };
 
-const slotStyles = (isInInteractive: boolean) => css`
+const slotStyles = css`
 	color: ${palette.neutral[7]};
 	margin: 12px auto;
-	${isInInteractive &&
-	css`
-		${grid.container};
-		& > *:first-child {
-			${grid.column.centre};
-		}
-	`}
 `;
 
 const buildReaderRevenueEpicConfig = (
@@ -128,7 +119,6 @@ export const SlotBodyEnd = ({
 	isLabs,
 	articleEndSlot,
 	isSensitive,
-	isInInteractive = false,
 }: Props) => {
 	const { renderingTarget } = useConfig();
 	const { brazeMessages, braze } = useBraze(idApiUrl, renderingTarget);
@@ -272,7 +262,7 @@ export const SlotBodyEnd = ({
 	) {
 		const { SelectedMessage } = pickMessageResult;
 		return (
-			<div id="slot-body-end" css={slotStyles(isInInteractive)}>
+			<div id="slot-body-end" css={slotStyles}>
 				<SelectedMessage />
 			</div>
 		);
@@ -281,7 +271,7 @@ export const SlotBodyEnd = ({
 		showArticleEndSlot
 	) {
 		return (
-			<div id="slot-body-end" css={slotStyles(isInInteractive)}>
+			<div id="slot-body-end" css={slotStyles}>
 				<AdSlot data-print-layout="hide" position="article-end" />
 			</div>
 		);

dotcom-rendering/src/components/SubMeta.tsx

@@ -34,6 +34,12 @@ const bottomPadding = css`
 
 const setMetaWidth = css`
 	position: relative;
+	padding-left: 10px;
+	padding-right: 10px;
+	${from.mobileLandscape} {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
 	${from.tablet} {
 		max-width: 620px;
 	}
@@ -42,12 +48,12 @@ const setMetaWidth = css`
 		margin-right: 310px;
 	}
 	${from.leftCol} {
-		margin-left: 150px;
+		margin-left: 170px;
 		padding-left: 10px;
 		border-left: 1px solid ${palette('--article-border')};
 	}
 	${from.wide} {
-		margin-left: 229px;
+		margin-left: 249px;
 	}
 `;
 
@@ -235,15 +241,6 @@ export const SubMeta = ({
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,
-				format.design === ArticleDesign.Interactive &&
-				!isDeprecatedInteractiveLayout
-					? css`
-							${grid.container};
-							> * {
-								${grid.column.centre}
-							}
-						`
-					: undefined,
 			]}
 		>
 			{format.design === ArticleDesign.Gallery && (

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -9,6 +9,7 @@ import { DiscussionLayout } from '../components/DiscussionLayout';
 import { FootballMatchHeaderWrapper } from '../components/FootballMatchHeaderWrapper.island';
 import { Footer } from '../components/Footer';
 import { HeaderAdSlot } from '../components/HeaderAdSlot';
+import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island';
 import { Island } from '../components/Island';
 import { LabsHeader } from '../components/LabsHeader';
 import { Masthead } from '../components/Masthead/Masthead';
@@ -116,6 +117,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	return (
 		<>
+			{isInteractive && <InteractivesScrollbarWidth />}
 			{isWeb && (
 				<div data-print-layout="hide" id="bannerandheader">
 					{renderAds && (

dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx

@@ -819,7 +819,6 @@ export const StandardLayoutArticleGrid = ({
 									!!article.config.switches.articleEndSlot
 								}
 								isSensitive={article.config.isSensitive}
-								isInInteractive={layoutType === 'interactive'}
 							/>
 						</Island>
 					)}

dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx

@@ -423,7 +423,6 @@ export const InteractiveArticleGridDeprecated = (
 								!!article.config.switches.articleEndSlot
 							}
 							isSensitive={article.config.isSensitive}
-							isInInteractive={true}
 						/>
 					</Island>
 				)}
@@ -447,6 +446,7 @@ export const InteractiveArticleGridDeprecated = (
 						article.showBottomSocialButtons &&
 						renderingTarget === 'Web'
 					}
+					isDeprecatedInteractiveLayout={true}
 				/>
 			</Section>
 		</>

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

@@ -244,38 +244,6 @@ const commentCss: LayoutCssMap = {
 	},
 };
 
-const interactiveCss: LayoutCssMap = {
-	title: {
-		tablet: 'grid-row: 1;',
-		leftCol: `grid-row: 1; ${grid.column.left}`,
-	},
-	headline: {
-		tablet: 'grid-row: 2;',
-		leftCol: 'grid-row: 1;',
-	},
-	standfirst: {
-		tablet: 'grid-row: 3;',
-		leftCol: 'grid-row: 2;',
-	},
-	media: {
-		tablet: 'grid-row: 4;',
-		leftCol: 'grid-row: 3;',
-	},
-	meta: {
-		tablet: 'grid-row: 5;',
-		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;',
-	},
-	'right-column': {
-		desktop: `grid-row: 1 / span 6; ${grid.column.right};`,
-		leftCol: `grid-row: 1 / span 4; ${grid.column.right};`,
-	},
-};
-
 const immersivePortraitCss: LayoutCssMap = {
 	title: {
 		belowDesktop: 'grid-row: 1;',
@@ -368,7 +336,7 @@ const layoutCssMaps: Record<LayoutType, LayoutCssMap> = {
 	media: mediaCss,
 	picture: pictureCss,
 	comment: commentCss,
-	interactive: interactiveCss,
+	interactive: standardCss,
 	immersiveLandscape: immersiveLandscapeCss,
 	immersivePortrait: immersivePortraitCss,
 };

dotcom-rendering/src/lib/ArticleRenderer.tsx

@@ -3,7 +3,6 @@ import { Fragment } from 'react';
 import { useConfig } from '../components/ConfigContext';
 import { FeastContextualNudge } from '../components/FeastContextualNudge.island';
 import { Island } from '../components/Island';
-import { grid } from '../grid';
 import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import type { Switches } from '../types/config';
@@ -245,13 +244,6 @@ export const ArticleRenderer = ({
 	// ^^ Until we decide where to do the "isomorphism split" in this this code is not safe here.
 	//    But should be soon.
 
-	const interactiveLayoutCSS = css`
-		${grid.container}
-		> * {
-			${grid.column.centre}
-		}
-	`;
-
 	const isInDeprecatedInteractiveLayout =
 		format.design === ArticleDesign.Interactive &&
 		articleArrangement === undefined;
@@ -268,14 +260,7 @@ export const ArticleRenderer = ({
 					? interactiveLegacyClasses.contentMainColumn
 					: '',
 			].join(' ')}
-			// TODO: Conditionally apply grid for interactives?
-			css={[
-				commercialPosition,
-				spacefinderAdStyles,
-				format.design === ArticleDesign.Interactive &&
-					!isInDeprecatedInteractiveLayout &&
-					interactiveLayoutCSS,
-			]}
+			css={[commercialPosition, spacefinderAdStyles]}
 		>
 			{renderingTarget === 'Apps'
 				? augmentedElements