Adjust media furniture layout

Author: frederickobrien

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -84,6 +84,26 @@ const stretchLines = css`
 	}
 `;
 
+const spanCentreToRightColumnFromDesktop = css`
+	${from.desktop} {
+		${grid.between('centre-column-start', 'right-column-start')};
+	}
+`;
+
+const rightColumnCss = (isMedia: boolean) => css`
+	display: none;
+
+	${from.desktop} {
+		display: block;
+		padding-top: 6px;
+		grid-row: ${isMedia ? 3 : 1} / span 999;
+	}
+
+	${from.leftCol} {
+		grid-row: ${isMedia ? 2 : 1} / span 999;
+	}
+`;
+
 interface GridItemProps {
 	area: Area;
 	layoutType: LayoutType;
@@ -92,45 +112,43 @@ interface GridItemProps {
 		desktop?: 'left' | 'centre' | 'right';
 		leftCol?: 'left' | 'centre' | 'right';
 	};
-	element?: 'div' | 'article' | 'main' | 'aside' | 'section';
+	element?: 'div' | 'aside';
 	customCss?: SerializedStyles;
 	children: React.ReactNode;
 }
 
+const columnCss = (columnsConfig?: GridItemProps['columns']) => [
+	grid.column.centre,
+	Object.entries({
+		tablet: columnsConfig?.tablet,
+		desktop: columnsConfig?.desktop,
+		leftCol: columnsConfig?.leftCol,
+	})
+		.filter(([, value]) => value != null)
+		.map(
+			([bp, col]) => css`
+				${from[bp as keyof typeof from]} {
+					${grid.column[col!]};
+				}
+			`,
+		),
+];
+
 const GridItem = ({
 	area,
 	layoutType,
 	columns,
 	element: Element = 'div',
 	customCss,
 	children,
-}: GridItemProps) => {
-	const columnCss = (columnsConfig?: GridItemProps['columns']) => [
-		grid.column.centre,
-		Object.entries({
-			tablet: columnsConfig?.tablet,
-			desktop: columnsConfig?.desktop,
-			leftCol: columnsConfig?.leftCol,
-		})
-			.filter(([, value]) => value != null)
-			.map(
-				([bp, col]) => css`
-					${from[bp as keyof typeof from]} {
-						${grid.column[col!]};
-					}
-				`,
-			),
-	];
-
-	return (
-		<Element
-			data-gu-name={area}
-			css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
-		>
-			{children}
-		</Element>
-	);
-};
+}: GridItemProps) => (
+	<Element
+		data-gu-name={area}
+		css={css([columnCss(columns), rowCss(area, layoutType), customCss])}
+	>
+		{children}
+	</Element>
+);
 
 interface Props {
 	article: ArticleDeprecated;
@@ -336,6 +354,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="main-media"
 							layoutType={layoutType}
 							element="div"
+							customCss={
+								isMedia
+									? spanCentreToRightColumnFromDesktop
+									: undefined
+							}
 						>
 							<div css={!isMedia && maxWidth}>
 								<MainMedia
@@ -404,6 +427,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="standfirst"
 							layoutType={layoutType}
 							element="div"
+							customCss={
+								isMedia
+									? spanCentreToRightColumnFromDesktop
+									: undefined
+							}
 						>
 							<Standfirst
 								format={format}
@@ -532,6 +560,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="body"
 							layoutType={layoutType}
 							element="div"
+							customCss={
+								isMedia
+									? spanCentreToRightColumnFromDesktop
+									: undefined
+							}
 						>
 							{/* Only show Listen to Article button on App landscape views */}
 							{isApps && (
@@ -675,14 +708,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							area="right-column"
 							layoutType={layoutType}
 							columns={{ desktop: 'right' }}
-							customCss={css`
-								display: none;
-								${from.desktop} {
-									display: block;
-									padding-top: 6px;
-									grid-row: 1 / span 999;
-								}
-							`}
+							customCss={rightColumnCss(isMedia)}
 							element="aside"
 						>
 							<Island

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

@@ -12,7 +12,7 @@ export type Area =
 	| 'meta'
 	| 'body'
 	| 'right-column'
-	// Match report specific areas
+	// Match report specific area
 	| 'match-summary';
 
 type LayoutRows = Partial<