Use correct image size for flexible layouts in half-width slots

Author: domlander

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

@@ -835,6 +835,7 @@ export const Card = ({
 							media.type === 'slideshow' && isFlexibleContainer
 						}
 						padImage={isMediaCardOrNewsletter && isBetaContainer}
+						isBetaContainer={isBetaContainer}
 					>
 						{media.type === 'slideshow' &&
 							(isFlexibleContainer ? (

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

@@ -18,27 +18,36 @@ const sizingStyles = css`
 const flexBasisStyles = ({
 	imageSize,
 	imageType,
+	isBetaContainer,
 }: {
 	imageSize: ImageSizeType;
 	imageType?: CardImageType;
+	isBetaContainer: boolean;
 }): SerializedStyles => {
 	if (imageType === 'avatar') {
 		return css`
 			flex-basis: 100%;
 		`;
 	}
+
 	switch (imageSize) {
 		default:
 		case 'small':
-			return css`
-				flex-basis: 75%;
-				${between.tablet.and.desktop} {
-					flex-basis: 60%;
-				}
-				${from.desktop} {
-					flex-basis: 70%;
-				}
-			`;
+			return isBetaContainer
+				? css`
+						${from.tablet} {
+							flex-basis: 50%;
+						}
+				  `
+				: css`
+						flex-basis: 75%;
+						${between.tablet.and.desktop} {
+							flex-basis: 60%;
+						}
+						${from.desktop} {
+							flex-basis: 70%;
+						}
+				  `;
 		case 'medium':
 			return css`
 				${from.tablet} {
@@ -139,7 +148,7 @@ export const ContentWrapper = ({
 			css={[
 				sizingStyles,
 				imageDirectionDesktop === 'horizontal' &&
-					flexBasisStyles({ imageSize, imageType }),
+					flexBasisStyles({ imageSize, imageType, isBetaContainer }),
 				padContent &&
 					!isBetaContainer &&
 					css`

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

@@ -44,6 +44,7 @@ type Props = {
 	 */
 	hideImageOverlay?: boolean;
 	padImage?: boolean;
+	isBetaContainer?: boolean;
 };
 
 const imageOverlayContainerStyles = css`
@@ -81,21 +82,27 @@ const imagePaddingStyles = (
  */
 const flexBasisStyles = ({
 	imageSize,
+	isBetaContainer,
 }: {
 	imageSize: ImageSizeType;
+	isBetaContainer: boolean;
 }): SerializedStyles => {
 	switch (imageSize) {
 		default:
 		case 'small':
-			return css`
-				flex-basis: 25%;
-				${between.tablet.and.desktop} {
-					flex-basis: 40%;
-				}
-				${from.desktop} {
-					flex-basis: 30%;
-				}
-			`;
+			return isBetaContainer
+				? css`
+						flex-basis: 50%;
+				  `
+				: css`
+						flex-basis: 25%;
+						${between.tablet.and.desktop} {
+							flex-basis: 40%;
+						}
+						${from.desktop} {
+							flex-basis: 30%;
+						}
+				  `;
 		case 'medium':
 			return css`
 				flex-basis: 50%;
@@ -154,6 +161,7 @@ export const ImageWrapper = ({
 	imagePositionOnMobile,
 	hideImageOverlay,
 	padImage,
+	isBetaContainer,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
@@ -170,6 +178,7 @@ export const ImageWrapper = ({
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						imageSize,
+						isBetaContainer: !!isBetaContainer,
 					}),
 				imageType === 'avatar' &&
 					css`

dotcom-rendering/src/components/CardPicture.tsx

@@ -206,6 +206,7 @@ export const CardPicture = ({
 	if (mainImage === '') {
 		return null;
 	}
+
 	const sources = generateSources(
 		mainImage,
 		decideImageWidths(imageSize, aspectRatio),

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -549,7 +549,7 @@ const HalfWidthCardLayout = ({
 							)}
 							supportingContentAlignment="vertical"
 							supportingContentPosition="outer"
-							imageSize="medium"
+							imageSize="small"
 							aspectRatio={aspectRatio}
 							kickerText={card.kickerText}
 							showLivePlayable={false}

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -245,7 +245,7 @@ const TwoOrFourCardLayout = ({
 							)}
 							/* we don't want to support sublinks on standard cards here so we hard code to undefined */
 							supportingContent={undefined}
-							imageSize="medium"
+							imageSize="small"
 							aspectRatio={aspectRatio}
 							kickerText={card.kickerText}
 							showLivePlayable={false}