Same for Scrollable Small

Author: domlander

dotcom-rendering/src/components/Card/Card.tsx

@@ -229,7 +229,7 @@ const HorizontalDivider = () => (
 
 const podcastImageStyles = (imageSize: MediaSizeType) => {
 	switch (imageSize) {
-		case 'small':
+		case 'scrollable-small':
 			return css`
 				width: 69px;
 				height: 69px;

dotcom-rendering/src/components/Card/components/AvatarContainer.tsx

@@ -81,6 +81,7 @@ const sizingStyles = (
 
 	switch (imageSize) {
 		case 'small':
+		case 'scrollable-small':
 			return isFlexibleContainer
 				? css`
 						width: 90px;

dotcom-rendering/src/components/Card/components/MediaWrapper.tsx

@@ -25,6 +25,7 @@ export type MediaSizeType =
 	| 'xlarge'
 	| 'jumbo'
 	| 'carousel'
+	| 'scrollable-small'
 	| 'scrollable-medium'
 	| 'podcast'
 	| 'highlights-card'

dotcom-rendering/src/components/CardPicture.tsx

@@ -50,6 +50,11 @@ const decideImageWidths = (
 				{ breakpoint: breakpoints.mobile, width: 220, aspectRatio },
 			];
 
+		case 'scrollable-small':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 86, aspectRatio },
+				{ breakpoint: breakpoints.tablet, width: 123, aspectRatio },
+			];
 		case 'scrollable-medium':
 			return [
 				{ breakpoint: breakpoints.mobile, width: 200, aspectRatio },

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

@@ -92,7 +92,7 @@ export const ScrollableSmall = ({
 							}}
 							mediaPositionOnDesktop="left"
 							mediaPositionOnMobile="left"
-							mediaSize="small"
+							mediaSize="scrollable-small"
 							trailText={undefined} // unsupported
 							supportingContent={undefined} // unsupported
 							aspectRatio={aspectRatio}