Move caption below byline in mobile breakpoints

Author: ioannakok

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
+import { Hide } from '@guardian/source/react-components';
 import { StraightLines } from '@guardian/source-development-kitchen/react-components';
 import type { FEArticle } from '../frontend/feArticle';
 import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling';
@@ -17,6 +18,7 @@ import type { FEElement } from '../types/content';
 import type { Podcast, TagType } from '../types/tag';
 import { Avatar } from './Avatar';
 import { Branding } from './Branding.importable';
+import { Caption } from './Caption';
 import { CommentCount } from './CommentCount.importable';
 import { useConfig } from './ConfigContext';
 import { Contributor } from './Contributor';
@@ -41,6 +43,7 @@ type Props = {
 	isCommentable: boolean;
 	mainMediaElements?: FEElement[];
 	crossword?: FEArticle['crossword'];
+	captionText?: string;
 };
 
 const meta = (format: ArticleFormat) => {
@@ -324,6 +327,7 @@ export const ArticleMeta = ({
 	isCommentable,
 	mainMediaElements,
 	crossword,
+	captionText,
 }: Props) => {
 	const soleContributor = getSoleContributor(tags, byline);
 	const authorName = soleContributor?.title ?? 'Author Image';
@@ -404,6 +408,21 @@ export const ArticleMeta = ({
 								/>
 							)}
 
+							{format.design === ArticleDesign.Gallery ? (
+								<Hide from="leftCol">
+									<Caption
+										captionText={captionText}
+										format={format}
+										isMainMedia={true}
+									/>
+									<StraightLines
+										cssOverrides={stretchLines}
+										count={4}
+										color={themePalette('--straight-lines')}
+									/>
+								</Hide>
+							) : null}
+
 							{crossword?.creator && (
 								<CrosswordSetter
 									setter={crossword.creator.name}

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -270,11 +270,15 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 						format={format}
 						standfirst={frontendData.standfirst}
 					/>
-					<Caption
-						captionText={captionText}
-						format={format}
-						isMainMedia={true}
-					/>
+
+					<Hide until="leftCol">
+						<Caption
+							captionText={captionText}
+							format={format}
+							isMainMedia={true}
+						/>
+					</Hide>
+
 					<div css={metaAndDisclaimerContainer}>
 						{isWeb ? (
 							<ArticleMeta
@@ -297,6 +301,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								isCommentable={frontendData.isCommentable}
 								discussionApiUrl={discussionApiUrl}
 								shortUrlId={shortUrlId}
+								captionText={captionText}
 							/>
 						) : null}
 						{isApps ? (

dotcom-rendering/src/paletteDeclarations.ts

@@ -3433,7 +3433,7 @@ const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20];
 
 const straightLinesLight: PaletteFunction = (format) => {
 	if (format.design === ArticleDesign.Gallery) {
-		return sourcePalette.neutral[20];
+		return sourcePalette.neutral[38];
 	}
 	if (format.theme === ArticleSpecial.SpecialReportAlt) {
 		return transparentColour(sourcePalette.neutral[60], 0.3);