From 6f2a23af3651535c861e07204b694a128f05efa4 Mon Sep 17 00:00:00 2001
From: Rhys Mills <rhys.mills@guardian.co.uk>
Date: Thu, 3 Oct 2024 14:40:30 +0100
Subject: [PATCH] Push pending changes

---
 .../src/components/MultiByline.stories.tsx     |  8 ++++----
 .../src/components/MultiBylineItem.tsx         | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/dotcom-rendering/src/components/MultiByline.stories.tsx b/dotcom-rendering/src/components/MultiByline.stories.tsx
index 9da434f385e..d088b8a768a 100644
--- a/dotcom-rendering/src/components/MultiByline.stories.tsx
+++ b/dotcom-rendering/src/components/MultiByline.stories.tsx
@@ -39,7 +39,7 @@ export const ThemeVariations = {
 	args: {
 		multiBylineItems: [
 			{
-				title: 'The first byline',
+				title: 'This subheading is quite long so is likely to run on to multiple lines',
 				bio: testBioText,
 				body: [testTextElement],
 				byline: 'Richard Hillgrove Political Editor',
@@ -54,10 +54,10 @@ export const ThemeVariations = {
 				],
 			},
 			{
-				title: 'The first byline',
+				title: 'My hot take',
 				bio: testBioText,
 				body: [testTextElement],
-				byline: 'Richard Hillgrove Guardian Contributor',
+				byline: 'Guardian Contributor',
 				bylineHtml:
 					"<a href='/profile/richard-hillgrove'>Richard Hillgrove</a>",
 				contributors: [
@@ -71,7 +71,7 @@ export const ThemeVariations = {
 					'https://i.guim.co.uk/img/uploads/2024/09/17/Maurice_Casey.png?width=180&dpr=1&s=none',
 			},
 			{
-				title: 'The second byline',
+				title: 'A further subheading',
 				body: [testTextElement],
 			},
 		],
diff --git a/dotcom-rendering/src/components/MultiBylineItem.tsx b/dotcom-rendering/src/components/MultiBylineItem.tsx
index 2c06e9d5c37..d99d01e3e4f 100644
--- a/dotcom-rendering/src/components/MultiBylineItem.tsx
+++ b/dotcom-rendering/src/components/MultiBylineItem.tsx
@@ -207,7 +207,7 @@ export const multiBylineBylineStyles = (format: ArticleFormat) => css`
 	color: ${neutral[46]};
 	a {
 		${subheadingStyles(format)}
-		color: ${palette('--byline-anchor')};
+		color: ${palette('--link-kicker-text')};
 		text-decoration: none;
 		font-style: normal;
 		:hover {
@@ -229,12 +229,20 @@ const bylineTextStyles = css`
 `;
 
 const bylineImageStyles = css`
-	width: 140px;
+	width: 80px;
 	border-radius: 50%;
-	margin-bottom: -16px;
-	height: 140px;
+	margin-bottom: -8px;
+	height: 80px;
+	min-width: 80px;
+	// TODO: make this different size based on screen size
 	overflow: hidden;
 	align-self: flex-end;
+	${from.tablet} {
+		height: 120px;
+		min-width: 120px;
+		width: 120px;
+		margin-bottom: -12px;
+	}
 `;
 
 interface MultiBylineItemProps {
@@ -251,7 +259,6 @@ export const MultiBylineItem = ({
 	return (
 		<>
 			<li css={multiBylineItemStyles} data-spacefinder-role="nested">
-				<hr css={headingLineStyles} />
 				<Byline
 					title={multiBylineItem.title}
 					byline={multiBylineItem.byline ?? ''}
@@ -288,6 +295,7 @@ const Byline = ({
 	return (
 		<div css={bylineWrapperStyles}>
 			<div css={bylineTextStyles}>
+				<hr css={headingLineStyles} />
 				<h3
 					id={slugify(title)}
 					css={[subheadingStyles(format), headingMarginStyle]}