place web meta and disclaimer in a container.

Using the container we can give it a padding-bottom and also share the
grid columns and the left border styling.

Author: marjisound

dotcom-rendering/src/components/AffiliateDisclaimer.tsx

@@ -1,14 +1,12 @@
 import { css } from '@emotion/react';
 import {
-	from,
 	palette,
 	space,
 	textSans12,
 	textSans14,
 	textSans15,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
-import { grid } from '../grid';
 import { palette as themePalette } from '../palette';
 
 const disclaimerLeftColStyles = css`
@@ -26,25 +24,11 @@ const disclaimerLeftColStyles = css`
 const galleryDisclaimerStyles = css`
 	${textSans12};
 	line-height: 1.5;
-	${grid.column.centre}
-	padding-bottom: ${space[6]}px;
 	color: ${themePalette('--affiliate-disclaimer-text')};
-	${from.tablet} {
-		position: relative;
-		&::before {
-			content: '';
-			position: absolute;
-			left: -10px;
-			top: 0;
-			bottom: 0;
-			width: 1px;
-			background-color: ${themePalette('--article-border')};
-		}
-	}
 	a {
 		color: ${themePalette('--affiliate-disclaimer-text')};
 		transition: border-color 0.15s ease-out;
-		border-bottom: 1px solid #707070;
+		border-bottom: 1px solid ${palette.neutral[46]};
 		text-decoration: none;
 	}
 	a:hover {

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
-import { grid } from '../../src/grid';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
 import {
@@ -184,28 +183,11 @@ export const metaContainer = (format: ArticleFormat) => {
 								}
 						  `;
 				case ArticleDesign.LiveBlog:
-				case ArticleDesign.DeadBlog: {
+				case ArticleDesign.DeadBlog:
+				case ArticleDesign.Gallery: {
 					return '';
 				}
-				case ArticleDesign.Gallery:
-					return css`
-						${grid.column.centre}
-						padding-bottom: ${space[3]}px;
-						${from.tablet} {
-							position: relative;
-							&::before {
-								content: '';
-								position: absolute;
-								left: -10px;
-								top: 0;
-								bottom: 0;
-								width: 1px;
-								background-color: ${themePalette(
-									'--article-border',
-								)};
-							}
-						}
-					`;
+
 				default:
 					return defaultMargins;
 			}

dotcom-rendering/src/components/Caption.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	space,
 	textSans12,
@@ -211,10 +212,24 @@ const captionLink = css`
 
 const galleryStyles = css`
 	${grid.column.centre}
+	margin-bottom: 0;
+	padding-bottom: 6px;
 	${from.leftCol} {
 		${grid.column.left}
 		grid-row-start: 8;
 	}
+	${between.tablet.and.leftCol} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--article-border')};
+		}
+	}
 `;
 
 const CameraIcon = ({ format }: IconProps) => {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,5 +1,9 @@
 import { css } from '@emotion/react';
-import { from, palette as sourcePalette } from '@guardian/source/foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+} from '@guardian/source/foundations';
 import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer';
 import { AppsFooter } from '../components/AppsFooter.importable';
 import { ArticleHeadline } from '../components/ArticleHeadline';
@@ -52,6 +56,23 @@ const headerStyles = css`
 	}
 `;
 
+const webMetaAndDisclaimerContainer = css`
+	${grid.column.centre}
+	padding-bottom: ${space[6]}px;
+	${from.tablet} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${palette('--article-border')};
+		}
+	}
+`;
+
 export const GalleryLayout = (props: WebProps | AppProps) => {
 	const gallery = props.gallery;
 	const frontendData = gallery.frontendData;
@@ -124,7 +145,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						isMainMedia={true}
 					/>
 					{isWeb ? (
-						<>
+						<div css={webMetaAndDisclaimerContainer}>
 							<ArticleMeta
 								branding={
 									frontendData.commercialProperties[
@@ -151,7 +172,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 							{!!frontendData.affiliateLinksDisclaimer && (
 								<GalleryAffiliateDisclaimer />
 							)}
-						</>
+						</div>
 					) : null}
 
 					{isApps ? (