Support vertical layout with avatar on mobile

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

@@ -24,22 +24,6 @@ const containerStyles = css`
 	flex-basis: 100%;
 `;
 
-const decideDirection = (imagePosition: ImagePositionType) => {
-	switch (imagePosition) {
-		case 'top':
-			return 'column';
-		case 'bottom':
-			return 'column-reverse';
-		case 'left':
-			return 'row';
-		case 'right':
-			return 'row-reverse';
-		// If there's no image (so no imagePosition) default to top down
-		case 'none':
-			return 'column';
-	}
-};
-
 // Until mobile landscape, show 1 card on small screens
 // Above mobile landscape, show 1 full card and min 20vw of second card
 const videoWidth = css`
@@ -64,40 +48,51 @@ const minWidth = (minWidthInPixels?: number) => {
 	`;
 };
 
+const decideDirection = (
+	imagePosition: ImagePositionType,
+	hasAvatar?: boolean,
+) => {
+	/**
+	 * Cards with an avatar are a special case as these are rendered
+	 * horizontally on mobile and vertically on tablet with the avatar always on
+	 * the right or bottom. `imagePosition` determines whether the layout is
+	 * horizontal or vertical, but not the alignment of the avatar.
+	 *
+	 * `scrollable/medium` is an exception as the medium cards have a vertical
+	 * layout at all breakpoints so `imagePositionOnMobile` is explicitly set to
+	 * `bottom` rather than the default of `left`.
+	 */
+	if (hasAvatar) {
+		return imagePosition === 'left' || imagePosition === 'right'
+			? 'row-reverse'
+			: 'column-reverse';
+	}
+
+	switch (imagePosition) {
+		case 'top':
+			return 'column';
+		case 'bottom':
+			return 'column-reverse';
+		case 'left':
+			return 'row';
+		case 'right':
+			return 'row-reverse';
+		// If there's no image (so no imagePosition) default to top down
+		case 'none':
+			return 'column';
+	}
+};
+
 const decidePosition = (
 	imagePositionOnDesktop: ImagePositionType,
 	imagePositionOnMobile: ImagePositionType,
-	imageType?: CardImageType,
-	containerType?: DCRContainerType,
-) => {
-	if (imageType === 'avatar' && containerType !== 'scrollable/medium') {
-		switch (imagePositionOnDesktop) {
-			case 'left':
-			case 'right': {
-				return css`
-					flex-direction: row-reverse;
-					${from.tablet} {
-						flex-direction: row-reverse;
-					}
-				`;
-			}
-			default: {
-				return css`
-					flex-direction: row-reverse;
-					${from.tablet} {
-						flex-direction: column-reverse;
-					}
-				`;
-			}
-		}
+	hasAvatar?: boolean,
+) => css`
+	flex-direction: ${decideDirection(imagePositionOnMobile, hasAvatar)};
+	${from.tablet} {
+		flex-direction: ${decideDirection(imagePositionOnDesktop, hasAvatar)};
 	}
-	return css`
-		flex-direction: ${decideDirection(imagePositionOnMobile)};
-		${from.tablet} {
-			flex-direction: ${decideDirection(imagePositionOnDesktop)};
-		}
-	`;
-};
+`;
 
 /** Detemines the gap size between components in card layout */
 const decideGap = (gapSize: GapSize) => {
@@ -134,8 +129,7 @@ export const CardLayout = ({
 			decidePosition(
 				imagePositionOnDesktop,
 				imagePositionOnMobile,
-				imageType,
-				containerType,
+				imageType === 'avatar',
 			),
 		]}
 		style={{