Apply grid to sub meta

Probably one to break out into its own PR

Author: frederickobrien

dotcom-rendering/src/components/SubMeta.tsx

@@ -14,6 +14,7 @@ import { grid } from '../grid';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import type { BaseLinkType } from '../model/extract-nav';
 import { palette } from '../palette';
+import { palette as themePalette } from '../palette';
 import { Island } from './Island';
 import { ShareButton } from './ShareButton.island';
 
@@ -235,8 +236,22 @@ export const SubMeta = ({
 				format.design === ArticleDesign.Gallery
 					? galleryStyles
 					: bottomPadding,
+				grid.container,
+				css`
+					> * {
+						${grid.column.centre}
+					}
+				`,
 			]}
 		>
+			<StraightLines
+				data-print-layout="hide"
+				count={4}
+				cssOverrides={css`
+					display: block;
+				`}
+				color={themePalette('--straight-lines')}
+			/>
 			{format.design === ArticleDesign.Gallery && (
 				<Fragment>
 					<div css={galleryBorder}></div>

dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { log } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsEpic } from '../components/AppsEpic.island';
 import { ArticleBody } from '../components/ArticleBody';
@@ -190,7 +189,17 @@ export const StandardLayoutArticleGrid = ({
 			<GridItem area="standfirst" layoutType={layoutType}>
 				<Standfirst format={format} standfirst={article.standfirst} />
 			</GridItem>
-			<GridItem area="meta" layoutType={layoutType} element="aside">
+			<GridItem
+				area="meta"
+				layoutType={layoutType}
+				element="aside"
+				css={
+					isInteractive &&
+					css`
+						z-index: 10;
+					`
+				}
+			>
 				<div css={stretchLines}>
 					{isWeb &&
 					format.theme === ArticleSpecial.Labs &&
@@ -373,14 +382,6 @@ export const StandardLayoutArticleGrid = ({
 							/>
 						</Island>
 					)}
-					<StraightLines
-						data-print-layout="hide"
-						count={4}
-						cssOverrides={css`
-							display: block;
-						`}
-						color={themePalette('--straight-lines')}
-					/>
 					<SubMeta
 						format={format}
 						subMetaKeywordLinks={article.subMetaKeywordLinks}
@@ -395,40 +396,38 @@ export const StandardLayoutArticleGrid = ({
 					/>
 				</ArticleContainer>
 			</GridItem>
-			{layoutType !== 'interactive' && (
-				<GridItem
-					area="right-column"
-					layoutType={layoutType}
-					css={css`
-						padding-top: ${isMedia ? 0 : 6}px;
-						${from.desktop} {
-							padding-bottom: ${isMedia ? 41 : 0}px;
-						}
-					`}
-				>
-					<Hide until="desktop">
-						<Island
-							priority="feature"
-							defer={{
-								until: 'visible',
-								// Provide a much higher value for the top margin for the intersection observer
-								// This is because the most viewed would otherwise only be lazy loaded when the
-								// bottom of the container intersects with the viewport
-								rootMargin: '700px 100px',
-							}}
-						>
-							<MostViewedRightWithAd
-								format={format}
-								isPaidContent={article.pageType.isPaidContent}
-								renderAds={isWeb && renderAds}
-								shouldHideReaderRevenue={
-									!!article.config.shouldHideReaderRevenue
-								}
-							/>
-						</Island>
-					</Hide>
-				</GridItem>
-			)}
+			<GridItem
+				area="right-column"
+				layoutType={layoutType}
+				css={css`
+					padding-top: ${isMedia ? 0 : 6}px;
+					${from.desktop} {
+						padding-bottom: ${isMedia ? 41 : 0}px;
+					}
+				`}
+			>
+				<Hide until="desktop">
+					<Island
+						priority="feature"
+						defer={{
+							until: 'visible',
+							// Provide a much higher value for the top margin for the intersection observer
+							// This is because the most viewed would otherwise only be lazy loaded when the
+							// bottom of the container intersects with the viewport
+							rootMargin: '700px 100px',
+						}}
+					>
+						<MostViewedRightWithAd
+							format={format}
+							isPaidContent={article.pageType.isPaidContent}
+							renderAds={isWeb && renderAds}
+							shouldHideReaderRevenue={
+								!!article.config.shouldHideReaderRevenue
+							}
+						/>
+					</Island>
+				</Hide>
+			</GridItem>
 		</article>
 	);
 };