From 2665d2e1d6f3dc3032d99baa99e7a2fc19d6aae4 Mon Sep 17 00:00:00 2001
From: Charlotte <charlotte.emms@theguardian.com>
Date: Wed, 24 Jun 2026 15:59:23 +0100
Subject: [PATCH 1/2] display cta button for apps hosted gallery articles

---
 .../src/layouts/HostedGalleryLayout.tsx       | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx b/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx
index 84c578117ab..a12040f7612 100644
--- a/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx
+++ b/dotcom-rendering/src/layouts/HostedGalleryLayout.tsx
@@ -140,19 +140,17 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
 						standfirst={frontendData.standfirst}
 					/>
 
-					{renderingTarget === 'Web' && (
-						<div data-print-layout="hide" css={metaStyles}>
-							{cta?.url && (
-								<div css={ctaButtonStyles}>
-									<CallToActionButton
-										linkUrl={cta.url}
-										accentColor={
-											branding?.hostedCampaignColour
-										}
-										buttonText={cta.btnText}
-									/>
-								</div>
-							)}
+					<div data-print-layout="hide" css={metaStyles}>
+						{cta?.url && (
+							<div css={ctaButtonStyles}>
+								<CallToActionButton
+									linkUrl={cta.url}
+									accentColor={branding?.hostedCampaignColour}
+									buttonText={cta.btnText}
+								/>
+							</div>
+						)}
+						{renderingTarget === 'Web' && (
 							<Island
 								priority="feature"
 								defer={{ until: 'visible' }}
@@ -164,8 +162,8 @@ export const HostedGalleryLayout = (props: WebProps | AppProps) => {
 									context="ArticleMeta"
 								/>
 							</Island>
-						</div>
-					)}
+						)}
+					</div>
 				</header>
 				<GalleryBody
 					renderingTarget={renderingTarget}

From 07c102b52426a85975c82a0ecd547c2889ec4a05 Mon Sep 17 00:00:00 2001
From: Charlotte <charlotte.emms@theguardian.com>
Date: Wed, 24 Jun 2026 17:27:22 +0100
Subject: [PATCH 2/2] use mobileMedium breakpoint for apps view on hosted
 gallery chromatic snapshots

---
 .../src/layouts/HostedGalleryLayout.stories.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/dotcom-rendering/src/layouts/HostedGalleryLayout.stories.tsx b/dotcom-rendering/src/layouts/HostedGalleryLayout.stories.tsx
index 65de50cda57..5f468c1478c 100644
--- a/dotcom-rendering/src/layouts/HostedGalleryLayout.stories.tsx
+++ b/dotcom-rendering/src/layouts/HostedGalleryLayout.stories.tsx
@@ -12,13 +12,6 @@ import { HostedGalleryLayout } from './HostedGalleryLayout';
 const meta = preview.meta({
 	title: 'Layouts/HostedGallery',
 	component: HostedGalleryLayout,
-	parameters: {
-		chromatic: {
-			modes: {
-				'light leftCol': allModes['light leftCol'],
-			},
-		},
-	},
 });
 
 const format = {
@@ -38,6 +31,11 @@ export const Apps = meta.story({
 		renderingTarget: 'Apps',
 	},
 	parameters: {
+		chromatic: {
+			modes: {
+				'light mobileMedium': allModes['light mobileMedium'],
+			},
+		},
 		config: {
 			renderingTarget: 'Apps',
 		},
@@ -55,6 +53,11 @@ export const Web = meta.story({
 		renderingTarget: 'Web',
 	},
 	parameters: {
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
 		config: {
 			renderingTarget: 'Web',
 		},