From a2229eab573684c02fc99d38b88d8af2e005f2ec Mon Sep 17 00:00:00 2001
From: Dominik Lander <dominik.lander@guardian.co.uk>
Date: Thu, 10 Oct 2024 16:57:06 +0100
Subject: [PATCH] Move stickyness up to top-level component

---
 .../src/components/ExpandableMarketingCard.tsx       | 12 +-----------
 dotcom-rendering/src/components/GridItem.tsx         |  5 +++++
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
index 89ca99a403..7281257654 100644
--- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
+++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx
@@ -16,7 +16,6 @@ import {
 	SvgCross,
 } from '@guardian/source/react-components';
 import type { Dispatch, SetStateAction } from 'react';
-import { getZIndex } from '../lib/getZIndex';
 import { palette } from '../palette';
 import { useConfig } from './ConfigContext';
 
@@ -43,12 +42,6 @@ const fillBarStyles = css`
 	}
 `;
 
-const containerStyles = css`
-	${getZIndex('expandableMarketingCardOverlay')}
-	position: sticky;
-	top: 0;
-`;
-
 const contentStyles = css`
 	position: relative;
 	display: flex;
@@ -170,10 +163,7 @@ export const ExpandableMarketingCard = ({
 	setIsClosed,
 }: Props) => {
 	return (
-		<div
-			css={containerStyles}
-			data-component="us-expandable-marketing-card"
-		>
+		<div data-component="us-expandable-marketing-card">
 			<div css={fillBarStyles} />
 			<div css={contentStyles}>
 				{!isExpanded ? (
diff --git a/dotcom-rendering/src/components/GridItem.tsx b/dotcom-rendering/src/components/GridItem.tsx
index 7c447d4eb2..4249a69cc3 100644
--- a/dotcom-rendering/src/components/GridItem.tsx
+++ b/dotcom-rendering/src/components/GridItem.tsx
@@ -30,6 +30,11 @@ const bodyStyles = css`
 `;
 
 const usCardStyles = css`
+	align-self: start;
+	position: sticky;
+	top: 0;
+	${getZIndex('expandableMarketingCardOverlay')}
+
 	${from.leftCol} {
 		margin-top: ${space[6]}px;
 		margin-bottom: ${space[9]}px;