Replace margin with flex gap

guardian · Oct 18, 2024 · 4c4dba2 · 4c4dba2
1 parent d7b4f05
commit 4c4dba2
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import {
-	between,
 	from,
 	headlineMedium24Object,
 	space,
@@ -55,8 +54,12 @@ const themeButtonDisabled = {
 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 */
@@ -113,10 +116,6 @@ const carouselStyles = css`
 	scrollbar-width: none; /* Firefox */
 	position: relative;
 
-	${between.tablet.and.wide} {
-		margin-top: ${space[2]}px;
-	}
-
 	padding-left: 10px;
 	scroll-padding-left: 10px;
 	${from.mobileLandscape} {
@@ -166,9 +165,6 @@ const verticalLineStyles = css`
 
 const buttonContainerStyles = css`
 	margin-left: auto;
-	${from.wide} {
-		margin-left: ${space[1]}px;
-	}
 `;
 
 const buttonLayoutStyles = css`