fix left borders

Author: marjisound

dotcom-rendering/src/components/MoreGalleries.tsx

@@ -39,16 +39,13 @@ const containerStyles = css`
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	overflow: hidden; /* Needed for scrolling to work */
 
 	margin-top: ${space[2]}px;
 	padding-bottom: ${space[6]}px;
 
 	margin-left: 0px;
 	margin-right: 0px;
 
-	border-bottom: 1px solid ${themePalette('--onward-content-border')};
-
 	${from.leftCol} {
 		margin-left: 10px;
 		margin-right: 100px;
@@ -79,6 +76,7 @@ const standardCardsListStyles = css`
 	display: flex;
 	flex-direction: row;
 	gap: 20px;
+	position: relative;
 
 	${from.tablet} {
 		padding-top: ${space[2]}px;
@@ -88,6 +86,16 @@ const standardCardsListStyles = css`
 		flex-direction: column;
 		width: 100%;
 	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: -11px;
+		top: 0;
+		bottom: 0;
+		width: 1px;
+		background-color: ${themePalette('--onward-content-border')};
+	}
 `;
 
 const headerStyles = css`
@@ -240,9 +248,25 @@ const MoreGalleriesSplashCard = ({
 	return (
 		<div
 			css={css`
+				position: relative;
 				margin-bottom: ${space[6]}px;
 				background-color: ${themePalette('--onward-card-background')};
 				padding: ${space[2]}px;
+				&::before {
+					content: '';
+					position: absolute;
+					left: -11px;
+					top: 0;
+					bottom: 0;
+					width: 1px;
+					background-color: ${themePalette(
+						'--onward-content-border',
+					)};
+
+					${until.tablet} {
+						left: -12px;
+					}
+				}
 			`}
 		>
 			{Card({ ...defaultProps, ...cardProps })}