Move stickyness up to top-level component

guardian · Oct 10, 2024 · a2229ea · a2229ea
1 parent f44fa2d
commit a2229ea
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git 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
@@ -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;