Seperate left border carousel styles so that can be applied differently when the carousel has stacked rows or not. (#13812)

This mean that we never have a left border on cards in the first column.

Author: abeddow91

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from, space } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import { useEffect, useRef, useState } from 'react';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
@@ -92,15 +92,35 @@ const itemStyles = css`
 	scroll-snap-align: start;
 	grid-area: span 1;
 	position: relative;
+`;
+
+const leftBorderStyles = css`
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: -10px;
+	width: 1px;
+	background-color: ${palette('--card-border-top')};
+	transform: translateX(-50%);
+`;
+
+const singleRowLeftBorderStyles = css`
 	:not(:first-child)::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: -10px;
-		width: 1px;
-		background-color: ${palette('--card-border-top')};
-		transform: translateX(-50%);
+		${leftBorderStyles}
+	}
+`;
+
+const stackedRowLeftBorderStyles = css`
+	${from.tablet} {
+		:not(:first-child)::before {
+			${leftBorderStyles}
+		}
+	}
+	${until.tablet} {
+		:not(:first-child):not(:nth-child(2))::before {
+			${leftBorderStyles}
+		}
 	}
 `;
 
@@ -297,6 +317,21 @@ export const ScrollableCarousel = ({
 	);
 };
 
-ScrollableCarousel.Item = ({ children }: { children: React.ReactNode }) => (
-	<li css={itemStyles}>{children}</li>
+ScrollableCarousel.Item = ({
+	isStackingCarousel = false,
+	children,
+}: {
+	isStackingCarousel?: boolean;
+	children: React.ReactNode;
+}) => (
+	<li
+		css={[
+			itemStyles,
+			isStackingCarousel
+				? stackedRowLeftBorderStyles
+				: singleRowLeftBorderStyles,
+		]}
+	>
+		{children}
+	</li>
 );

dotcom-rendering/src/components/ScrollableSmall.importable.tsx

@@ -18,6 +18,32 @@ type Props = {
 	sectionId: string;
 };
 
+/**
+ * The scrollable small container displays in the following ways:
+ * It is limited to 4 cards maximum and displays in a 2x2 grid.
+ * It is scrollable on mobile and static on tablet and desktop.
+ * On mobile, each column is scrollable
+ *
+ * The layout of cards within the 2x2 grid differs between breakpoints:
+ *
+ * On mobile, the layout is:
+ *
+ * +--------+--------+
+ * | Card 0 | Card 2 |
+ * +--------+--------+
+ * | Card 1 | Card 3 |
+ * +--------+--------+
+ *
+ * On tablet and above, the layout is:
+ *
+ * +--------+--------+
+ * | Card 0 | Card 1 |
+ * +--------+--------+
+ * | Card 2 | Card 3 |
+ * +--------+--------+
+ *
+ */
+
 /**
  * A container used on fronts to display a carousel of small cards
  *
@@ -47,7 +73,10 @@ export const ScrollableSmall = ({
 		>
 			{trails.map((trail, index) => {
 				return (
-					<ScrollableCarousel.Item key={trail.url}>
+					<ScrollableCarousel.Item
+						key={trail.url}
+						isStackingCarousel={true}
+					>
 						<FrontCard
 							trail={trail}
 							imageLoading={imageLoading}