Add immersive caption padding to compensate for negative margins

guardian · Jan 17, 2025 · 3f646cd · 3f646cd
1 parent 56aa76e
commit 3f646cd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx
@@ -28,6 +28,7 @@ type Props = {
 	isLeftCol?: boolean;
 	mediaType?: MediaType;
 	isMainMedia?: boolean;
+	isImmersive?: boolean;
 };
 
 type IconProps = {
@@ -123,6 +124,25 @@ const tabletCaptionPadding = css`
 	}
 `;
 
+const immersivePadding = css`
+	padding-left: 10px;
+	padding-right: 10px;
+	${from.mobileLandscape} {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	${from.tablet} {
+		padding-right: 100px;
+	}
+	${from.desktop} {
+		padding-right: 340px;
+	}
+	${from.leftCol} {
+		padding-left: 0;
+		padding-right: 0;
+	}
+`;
+
 const bigLeftMargin = css`
 	width: inherit;
 	margin-left: ${space[9]}px;
@@ -228,6 +248,7 @@ export const Caption = ({
 	isLeftCol,
 	mediaType = 'Gallery',
 	isMainMedia = false,
+	isImmersive = false,
 }: Props) => {
 	// Sometimes captions come thorough as a single blank space, so we trim here to ignore those
 	const noCaption = !captionText?.trim();
@@ -249,6 +270,7 @@ export const Caption = ({
 					(isBlog || mediaType === 'Video') &&
 					tabletCaptionPadding,
 				padCaption && captionPadding,
+				isImmersive && immersivePadding,
 			]}
 			data-spacefinder-role="inline"
 		>

diff --git a/dotcom-rendering/src/components/ImageComponent.tsx b/dotcom-rendering/src/components/ImageComponent.tsx
@@ -568,6 +568,7 @@ export const ImageComponent = ({
 					shouldLimitWidth={shouldLimitWidth}
 					isMainMedia={isMainMedia}
 					padCaption={role === 'showcase' && isTimeline}
+					isImmersive={role === 'immersive'}
 				/>
 			)}
 		</>