Don't fix podcast image width when card is horizontal

Author: domlander

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

@@ -227,33 +227,37 @@ const HorizontalDivider = () => (
 	/>
 );
 
-const podcastImageStyles = (imageSize: MediaSizeType) => {
-	switch (imageSize) {
-		case 'small':
-			return css`
-				width: 69px;
-				height: 69px;
-				${from.tablet} {
-					width: 98px;
-					height: 98px;
-				}
-			`;
-
-		case 'medium':
-			return css`
+const podcastImageStyles = (
+	fixImageWidth: boolean,
+	imagePositionOnDesktop: MediaPositionType,
+) => {
+	if (fixImageWidth) {
+		return css`
+			width: 69px;
+			height: 69px;
+			${from.tablet} {
 				width: 98px;
 				height: 98px;
-				${from.tablet} {
-					width: 120px;
-					height: 120px;
-				}
-			`;
-		default:
-			return css`
+			}
+		`;
+	}
+
+	if (
+		imagePositionOnDesktop === 'top' ||
+		imagePositionOnDesktop === 'bottom'
+	) {
+		return css`
+			width: 98px;
+			height: 98px;
+			${from.tablet} {
 				width: 120px;
 				height: 120px;
-			`;
+			}
+		`;
 	}
+
+	// Don't fix the image width if the image is horizontal on desktop
+	return undefined;
 };
 
 const getMedia = ({
@@ -908,8 +912,9 @@ export const Card = ({
 						mediaPositionOnMobile={mediaPositionOnMobile}
 						fixImageWidth={
 							fixImageWidth ??
-							(mediaPositionOnMobile === 'left' ||
-								mediaPositionOnMobile === 'right')
+							(!isBetaContainer &&
+								(mediaPositionOnMobile === 'left' ||
+									mediaPositionOnMobile === 'right'))
 						}
 						hideImageOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
@@ -1119,7 +1124,12 @@ export const Card = ({
 						{media.type === 'podcast' && (
 							<>
 								{media.podcastImage?.src && !showKickerImage ? (
-									<div css={podcastImageStyles(mediaSize)}>
+									<div
+										css={podcastImageStyles(
+											!!fixImageWidth,
+											mediaPositionOnDesktop,
+										)}
+									>
 										<CardPicture
 											mainImage={media.podcastImage.src}
 											imageSize="small"

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

@@ -213,6 +213,15 @@ export const MediaWrapper = ({
 						mediaSize,
 						isBetaContainer,
 					}),
+				mediaType === 'podcast' &&
+					isHorizontalOnDesktop &&
+					!fixImageWidth &&
+					css`
+						flex-basis: 120px;
+						${from.desktop} {
+							flex-basis: 168px;
+						}
+					`,
 				mediaType === 'avatar' &&
 					css`
 						display: flex;

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

@@ -104,6 +104,7 @@ export const ScrollableSmall = ({
 							showTopBarMobile={mobileBottomCards.includes(index)}
 							canPlayInline={false}
 							showLabsRedesign={showLabsRedesign}
+							fixImageWidth={true}
 						/>
 					</ScrollableCarousel.Item>
 				);