Merge pull request #14439 from guardian/doml/highlights-small-screens

Update font sizes at mobile breakpoints

Author: domlander

dotcom-rendering/src/components/CardHeadline.tsx

@@ -227,7 +227,7 @@ export const CardHeadline = ({
 					css={css`
 						color: ${headlineColour};
 					`}
-					className="show-underline"
+					className="show-underline headline-text"
 				>
 					{headlineText}
 					{isExternalLink && (

dotcom-rendering/src/components/Masthead/HighlightsCard.tsx

@@ -100,6 +100,16 @@ const content = css`
 	${from.tablet} {
 		padding-bottom: 10px;
 	}
+
+	/**
+	 * We're deliberately using a font-size that is not in Source so that
+	 * the headline doesn't exceed three lines across all mobile breakpoints
+	 */
+	${between.mobileMedium.and.mobileLandscape} {
+		.headline-text {
+			font-size: 1rem;
+		}
+	}
 `;
 
 const starWrapper = css`
@@ -144,7 +154,7 @@ export const HighlightsCard = ({
 							desktop: 'xxsmall',
 							tablet: 'xxsmall',
 							mobileMedium: 'xxsmall',
-							mobile: 'tiny',
+							mobile: 'xxxsmall',
 						}}
 						showPulsingDot={
 							format.design === ArticleDesign.LiveBlog

dotcom-rendering/src/components/ScrollableHighlights.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof ScrollableHighlights> = {
 		chromatic: {
 			viewports: [
 				breakpoints.mobile,
+				breakpoints.mobileMedium,
 				breakpoints.mobileLandscape,
 				breakpoints.tablet,
 				breakpoints.wide,