From 76d777527ae6014f87c97d76da939375ae352189 Mon Sep 17 00:00:00 2001
From: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
Date: Wed, 26 Aug 2026 14:46:56 +0100
Subject: [PATCH] `Versus` change number alignment

At the moment, in the `Versus` component, if there is a change number it
always appears below the main value number. This alters that behaviour,
so that this is now only the case when there are images in the `Versus`
component. If there aren't images, the change number moves alongside the
value number, as there's more horizontal space available.
---
 .../components/ElectionTrackers/Versus.tsx    | 65 +++++++++++++++----
 1 file changed, 54 insertions(+), 11 deletions(-)

diff --git a/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx b/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx
index 0909617f847..0c1e011baf1 100644
--- a/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx
+++ b/dotcom-rendering/src/components/ElectionTrackers/Versus.tsx
@@ -7,6 +7,7 @@ import {
 	headlineMedium20Object,
 	headlineMedium24Object,
 	headlineMedium34Object,
+	space,
 	textSans12Object,
 } from '@guardian/source/foundations';
 import { generateImageURL } from '../../lib/image';
@@ -166,24 +167,19 @@ const GroupComponent = (props: {
 					: textColour(props.faded)
 			}
 		/>
-		<Value
-			value={props.group.value}
-			colour={
-				props.colour === 'value'
-					? props.group.colour
-					: textColour(props.faded)
-			}
+		<ValueWithChange
+			align={props.align}
+			colour={props.colour}
 			faded={props.faded}
+			group={props.group}
 		/>
-		{'change' in props.group ? (
-			<Change change={props.group.change} />
-		) : (
+		{'description' in props.group ? (
 			<Description
 				description={props.group.description}
 				align={props.align}
 				faded={props.faded}
 			/>
-		)}
+		) : null}
 	</p>
 );
 
@@ -230,6 +226,53 @@ const Name = ({
 	</span>
 );
 
+const ValueWithChange = (props: {
+	align: 'left' | 'right';
+	colour: Props['colour'];
+	faded: Props['faded'];
+	group: Group;
+}) => {
+	const value = (
+		<Value
+			value={props.group.value}
+			colour={
+				props.colour === 'value'
+					? props.group.colour
+					: textColour(props.faded)
+			}
+			faded={props.faded}
+		/>
+	);
+
+	const change =
+		'change' in props.group ? <Change change={props.group.change} /> : null;
+
+	if (props.group.image !== undefined) {
+		return (
+			<>
+				{value}
+				{change}
+			</>
+		);
+	}
+
+	return (
+		<span
+			css={{
+				display: 'flex',
+				alignItems: 'end',
+				gap: space[1],
+			}}
+			style={{
+				flexDirection: props.align === 'right' ? 'row-reverse' : 'row',
+			}}
+		>
+			{value}
+			{change}
+		</span>
+	);
+};
+
 const Value = (props: {
 	value: Group['value'];
 	colour: string;