Adjust feast thrasher style on apps

Author: tomrf1

dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.stories.tsx

@@ -9,4 +9,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const FeastThrasher: Story = {};
+export const FeastThrasher: Story = {
+	args: {
+		renderingTarget: 'Web',
+	},
+};
+
+export const FeastThrasherApps: Story = {
+	args: {
+		renderingTarget: 'Apps',
+	},
+};

dotcom-rendering/src/components/marketing/thrashers/FeastThrasher.tsx

@@ -15,12 +15,20 @@ import {
 	SvgArrowRightStraight,
 	SvgGuardianLogo,
 } from '@guardian/source/react-components';
+import type { RenderingTarget } from '../../../types/renderingTarget';
 
 const styles = {
-	container: css`
+	container: (renderingTarget: RenderingTarget) => css`
 		/* stylelint-disable-next-line color-no-hex */
 		background: #f7efe9;
 		color: ${palette.neutral[0]};
+		${renderingTarget === 'Apps'
+			? css`
+					margin: 0 4px;
+					border-radius: 8px;
+					overflow: hidden;
+			  `
+			: ''}
 	`,
 	grid: css`
 		display: grid;
@@ -113,9 +121,13 @@ const tabletImageUrl =
 const mobileAndDesktopImageUrl =
 	'https://media.guim.co.uk/a0cc02db1394f8710bdce008e2297759098d53b3/0_0_2000_1200/2000.png';
 
-export const FeastThrasher = () => {
+interface Props {
+	renderingTarget: RenderingTarget;
+}
+
+export const FeastThrasher = ({ renderingTarget }: Props) => {
 	return (
-		<div css={styles.container}>
+		<div css={styles.container(renderingTarget)}>
 			<div css={styles.grid}>
 				<div css={styles.logo}>
 					<SvgGuardianLogo

dotcom-rendering/src/server/render.thrasher.apps.tsx

@@ -27,7 +27,7 @@ const thrasherTemplate = (html: string, css: string): string => {
 
 export const renderThrasher = (name: ThrasherName): { html: string } => {
 	const { html, extractedCss } = renderToStringWithEmotion(
-		<>{name === 'feast' && <FeastThrasher />}</>,
+		<>{name === 'feast' && <FeastThrasher renderingTarget={'Apps'} />}</>,
 	);
 
 	const pageHtml = thrasherTemplate(html, extractedCss);