Fix gallery secondary onward image size and padding

Author: marjisound

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

@@ -604,7 +604,8 @@ export const Card = ({
 		containerType === 'flexible/special' ||
 		containerType === 'flexible/general';
 
-	const isSmallCard = containerType === 'scrollable/small';
+	const isSmallCard =
+		containerType === 'scrollable/small' || isGallerySecondaryOnward;
 
 	const hideTrailTextUntil = () => {
 		if (isFlexibleContainer) {
@@ -635,6 +636,13 @@ export const Card = ({
 	 * Order matters here as the logic is based on the card properties
 	 */
 	const getGapSizes = (): GapSizes => {
+		if (isGallerySecondaryOnward) {
+			return {
+				row: 'medium',
+				column: 'medium',
+			};
+		}
+
 		if (isOnwardContent) {
 			return {
 				row: 'none',
@@ -749,7 +757,12 @@ export const Card = ({
 		onwardContent: boolean,
 	): 'large' | 'small' | undefined => {
 		if (mediaCard && betaContainer) return 'large';
-		if (mediaCard || onwardContent) return 'small';
+		if (
+			(mediaCard || onwardContent) &&
+			!(isGallerySecondaryOnward || isMoreGalleriesOnwardContent)
+		) {
+			return 'small';
+		}
 		return undefined;
 	};
 
@@ -1175,7 +1188,7 @@ export const Card = ({
 					padContent={determinePadContent(
 						isMediaCardOrNewsletter,
 						isBetaContainer,
-						isOnwardContent && !isMoreGalleriesOnwardContent,
+						isOnwardContent,
 					)}
 				>
 					{/* This div is needed to keep the headline and trail text justified at the start */}

dotcom-rendering/src/components/MoreGalleries.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { galleryOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { MoreGalleries as MoreGalleriesComponent } from './MoreGalleries';
 
 const meta = {
@@ -16,5 +17,10 @@ export const MoreGalleries = {
 		discussionApiUrl: 'https://discussion.theguardian.com/discussion-api',
 		guardianBaseUrl: 'https://www.theguardian.com',
 		trails: galleryOnwardsTrails,
+		format: {
+			design: ArticleDesign.Gallery,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Culture,
+		},
 	},
 } satisfies Story;

dotcom-rendering/src/components/ScrollableSmallOnwards.tsx

@@ -221,7 +221,7 @@ const getDefaultCardProps = (
 		imageLoading: 'lazy',
 		showAge: true,
 		aspectRatio: '5:4',
-		mediaSize: 'small',
+		mediaSize: 'scrollable-small',
 		mediaPositionOnDesktop: 'left',
 		mediaPositionOnMobile: 'left',
 		headlineSizes: {