Add spacing to prevent carousel content being flush with buttons (#12675

)
guardian · Oct 24, 2024 · 873c655 · 873c655
1 parent 9fcf2ca
commit 873c655
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx
@@ -45,8 +45,12 @@ const themeButtonDisabled: Partial<ThemeButton> = {
 const carouselContainerStyles = css`
 	display: flex;
 	flex-direction: column-reverse;
+	${from.tablet} {
+		gap: ${space[2]}px;
+	}
 	${from.wide} {
 		flex-direction: row;
+		gap: ${space[1]}px;
 	}
 
 	/* Extend carousel into outer margins on mobile */
@@ -121,9 +125,6 @@ const carouselStyles = css`
 
 const buttonContainerStyles = css`
 	margin-left: auto;
-	${from.wide} {
-		margin-left: ${space[1]}px;
-	}
 `;
 
 const buttonLayoutStyles = css`