Fix gallery paddings and borders

This is to align them with the grid column in the grid layout

Co-authored-by: Jamie B <[email protected]>

Author: marjisound

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -384,12 +384,13 @@ const decideBottomPadding = ({
 };
 
 const galleryStyles = css`
-	${grid.between('centre-column-start', 'grid-end')};
+	${grid.between('grid-start', 'centre-column-end')}
+
 	grid-row: 7/9;
 
-	${until.tablet} {
-		${grid.column.all}
-		max-width: 620px;
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
 	}
 `;
 

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

@@ -191,11 +191,19 @@ export const metaContainer = (format: ArticleFormat) => {
 					return css`
 						${grid.column.centre}
 						padding-bottom: ${space[3]}px;
-						padding-left: ${space[3]}px;
-						margin-right: ${space[3]}px;
 						${from.tablet} {
-							border-left: 1px solid
-								${themePalette('--article-border')};
+							position: relative;
+							&::before {
+								content: '';
+								position: absolute;
+								left: -10px;
+								top: 0;
+								bottom: 0;
+								width: 1px;
+								background-color: ${themePalette(
+									'--article-border',
+								)};
+							}
 						}
 					`;
 				default:

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from, until } from '@guardian/source/foundations';
+import { from } from '@guardian/source/foundations';
 import { grid } from '../../src/grid';
 import {
 	ArticleDesign,
@@ -43,13 +43,15 @@ const immersiveMargins = css`
 `;
 
 const galleryStyles = css`
-	${grid.between('centre-column-start', 'grid-end')};
+	${grid.column.all}
+
 	grid-row: 6/7;
 	max-width: 400px;
 	min-width: 200px;
 
-	${until.tablet} {
-		${grid.column.all}
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
 	}
 `;
 

dotcom-rendering/src/components/Standfirst.tsx

@@ -322,14 +322,21 @@ const standfirstStyles = ({ display, design, theme }: ArticleFormat) => {
 						color: ${palette('--standfirst-text')};
 						background-color: ${palette('--standfirst-background')};
 
-						padding-left: ${space[0]}px;
-						margin-right: ${space[3]}px;
-
 						${from.tablet} {
 							${grid.span('centre-column-start', 7)}
-							padding-left: 12px;
-							border-left: 1px solid
-								${palette('--article-border')};
+
+							position: relative;
+							&::before {
+								content: '';
+								position: absolute;
+								left: -10px;
+								top: 0;
+								bottom: 0;
+								width: 1px;
+								background-color: ${palette(
+									'--article-border',
+								)};
+							}
 						}
 
 						${from.desktop} {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,8 +1,5 @@
 import { css } from '@emotion/react';
-import {
-	between,
-	from,
-} from '@guardian/source/foundations';
+import { between, from } from '@guardian/source/foundations';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
@@ -165,16 +162,12 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								${from.leftCol} {
 									${grid.column.left}
 								}
+								position: relative;
 								${between.tablet.and.leftCol} {
-									border-left: 1px solid
-										${palette('--article-border')};
-								}
-								${from.leftCol} {
-									position: relative; /* allows the ::after to be positioned relative to this */
-									&::after {
+									&::before {
 										content: '';
 										position: absolute;
-										right: -21px;
+										left: -10px;
 										top: 0;
 										bottom: 0;
 										width: 1px;