Added comment. Put the flexBasis logic in MediaWrapper together

Author: domlander

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

@@ -250,6 +250,7 @@ const podcastImageStyles = (
 			width: 120px;
 			height: 120px;
 		}
+		/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */
 		${from.desktop} {
 			width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
 			height: ${isHorizontalOnDesktop ? 'unset' : '120px'};

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

@@ -77,9 +77,13 @@ const mediaPaddingStyles = (
  */
 const flexBasisStyles = ({
 	mediaSize,
+	mediaType,
+	isSmallCard,
 	isBetaContainer,
 }: {
 	mediaSize: MediaSizeType;
+	mediaType: CardMediaType;
+	isSmallCard: boolean;
 	isBetaContainer: boolean;
 }): SerializedStyles => {
 	if (!isBetaContainer) {
@@ -110,6 +114,15 @@ const flexBasisStyles = ({
 		}
 	}
 
+	if (mediaType === 'podcast' && !isSmallCard) {
+		return css`
+			flex-basis: 120px;
+			${from.desktop} {
+				flex-basis: 168px;
+			}
+		`;
+	}
+
 	switch (mediaSize) {
 		default:
 		case 'small':
@@ -206,10 +219,13 @@ export const MediaWrapper = ({
 				(mediaType === 'slideshow' ||
 					mediaType === 'picture' ||
 					mediaType === 'youtube-video' ||
-					mediaType === 'loop-video') &&
+					mediaType === 'loop-video' ||
+					mediaType === 'podcast') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						mediaSize,
+						mediaType,
+						isSmallCard,
 						isBetaContainer,
 					}),
 				mediaType === 'avatar' &&
@@ -228,15 +244,6 @@ export const MediaWrapper = ({
 					mediaType !== 'podcast' &&
 					fixMobileMediaWidth(isBetaContainer, isSmallCard),
 				isSmallCard && fixDesktopMediaWidth(),
-				mediaType === 'podcast' &&
-					isHorizontalOnDesktop &&
-					!isSmallCard &&
-					css`
-						flex-basis: 120px;
-						${from.desktop} {
-							flex-basis: 168px;
-						}
-					`,
 				isHorizontalOnDesktop &&
 					css`
 						${from.tablet} {