small tweaks

Author: Georges-GNM

dotcom-rendering/src/components/Card/components/TrailText.tsx

@@ -9,7 +9,7 @@ import {
 import { Hide } from '@guardian/source/react-components';
 import { palette } from '../../../palette';
 
-export type TrailTextSize = 'regular' | 'large' | 'xlarge';
+export type TrailTextSize = 'regular' | 'large';
 
 const trailTextStyles = css`
 	display: flex;
@@ -28,7 +28,6 @@ const fontStyles = (trailTextSize: TrailTextSize) => css`
 	${textSans14}
 	${from.desktop} {
 		${trailTextSize === 'large' && textSans17}
-		${trailTextSize === 'xlarge' && textSans20}
 	}
 	strong {
 		font-weight: bold;
@@ -56,16 +55,12 @@ export const TrailText = ({
 	padBottom = true,
 	padTop = false,
 }: Props) => {
-	const effectiveColour =
-		trailTextSize === 'xlarge'
-			? palette('--card-headline')
-			: trailTextColour;
 	const trailText = (
 		<div
 			css={[
 				trailTextStyles,
 				css`
-					color: ${effectiveColour};
+					color: ${trailTextColour};
 				`,
 				fontStyles(trailTextSize),
 				padBottom && bottomPadding,

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -62,9 +62,13 @@ const determineCardProperties = (
 		case 'default':
 			return {
 				headlineSizes: {
-					desktop: imageSuppressed ? 'xxlarge' : 'xlarge',
-					tablet: 'large',
-					mobile: 'medium',
+					desktop: SCStyle
+						? 'small'
+						: imageSuppressed
+						? 'xxlarge'
+						: 'xlarge',
+					tablet: SCStyle ? 'small' : 'large',
+					mobile: SCStyle ? 'xxsmall' : 'medium',
 				},
 				mediaSize: 'xlarge',
 				mediaPositionOnDesktop: 'right',
@@ -204,7 +208,9 @@ export const OneCardLayout = ({
 					trailTextSize={trailTextSize}
 					canPlayInline={true}
 					showKickerImage={card.format.design === ArticleDesign.Audio}
-					headlinePosition={isSplashCard ? 'outer' : 'inner'}
+					headlinePosition={
+						SCStyle ? 'inner' : isSplashCard ? 'outer' : 'inner'
+					}
 					showLabsRedesign={showLabsRedesign}
 					subtitleSize={subtitleSize}
 				/>

dotcom-rendering/src/components/StorylineSection.tsx

@@ -370,6 +370,7 @@ const sectionContentBorderFromLeftCol = css`
 			position: absolute;
 			top: ${space[2]}px;
 			bottom: 0;
+			border-left: 1px solid ${schemePalette('--section-border')};
 			transform: translateX(-50%);
 			/** Keeps the vertical divider ontop of carousel item dividers */
 			z-index: 1;
@@ -386,15 +387,19 @@ const sectionBottomContent = css`
 `;
 
 const sectionTreats = css`
-	display: none;
+	/* Mobile: treats appear at the bottom */
+	grid-row: bottom-content;
+	grid-column: content;
+	${from.leftCol} {
+		padding-top: ${space[2]}px;
+	}
+	padding-bottom: ${space[3]}px;
 
 	${from.leftCol} {
-		padding-bottom: ${space[3]}px;
-		display: block;
 		align-self: end;
-
 		grid-row: treats;
 		grid-column: title;
+		padding-top: 0;
 	}
 
 	.hidden > & {
@@ -426,7 +431,7 @@ const topBorder = css`
 `;
 
 const bottomPadding = css`
-	padding-bottom: ${space[6]}px;
+	padding-bottom: ${space[4]}px;
 `;
 
 const bottomPaddingBetaContainer = (
@@ -435,13 +440,13 @@ const bottomPaddingBetaContainer = (
 ) => css`
 	${until.tablet} {
 		padding-bottom: ${useLargeSpacingMobile
-			? `${space[10]}px`
-			: `${space[6]}px`};
+			? `${space[8]}px`
+			: `${space[4]}px`};
 	}
 	${from.tablet} {
 		padding-bottom: ${useLargeSpacingDesktop
-			? `${space[10]}px`
-			: `${space[6]}px`};
+			? `${space[8]}px`
+			: `${space[4]}px`};
 	}
 `;
 
@@ -744,7 +749,7 @@ export const StorylineSection = ({
 				</div>
 
 				{treats && !hasPageSkin && (
-					<div css={[sectionTreats, topPadding]}>
+					<div css={[sectionTreats]}>
 						<Treats
 							treats={treats}
 							borderColour={schemePalette('--section-border')}

dotcom-rendering/src/components/StorylineTabContent.tsx

@@ -15,9 +15,10 @@ const categoryTitleCss = css`
 	${textSans20};
 	font-weight: 700;
 	color: ${sourcePalette.news[300]};
+	margin: ${space[2]}px 0;
 	padding: ${space[2]}px 0;
 	${from.tablet} {
-		padding: 10px;
+		margin: 10px;
 	}
 
 	border-top: 1px solid ${palette('--section-border-secondary')};
@@ -52,6 +53,7 @@ export const StorylineTabContent = ({ content }: { content: Category[] }) => {
 						aspectRatio={'5:4'}
 						collectionId={0}
 						SCStyle={true}
+						containerLevel="Secondary"
 					/>
 				);
 			case 'flexible/general':

dotcom-rendering/src/components/StorylinesSection.importable.tsx

@@ -36,7 +36,7 @@ const tabsContainerStyles = css`
 	display: flex;
 	width: 100%;
 	align-items: stretch; /* Makes all tabs the same height */
-	margin-bottom: ${space[2]}px;
+	margin-bottom: ${space[6]}px;
 	margin-left: -${space[2]}px; /* on mobile at least */
 `;
 
@@ -86,9 +86,9 @@ export const StorylinesSection = ({
 				format: { design: 0, display: 0, theme: 0 },
 				dataLinkName: 'news | group-0 | card-@1',
 				url: '',
-				headline: '',
-				trailText:
+				headline:
 					'The former prince remains under scrutiny as Buckingham Palace finalises plans for his future as a commoner',
+				trailText: undefined,
 				starRating: undefined,
 				webPublicationDate: '2025-10-31T19:24:41.000Z',
 				kickerText: undefined,
@@ -700,7 +700,7 @@ export const StorylinesSection = ({
 				{/* Tab selector */}
 				<div css={tabsContainerStyles}>
 					<ScrollableCarousel
-						carouselLength={Math.ceil(testStorylines.length / 2)}
+						carouselLength={Math.ceil(testStorylines.length)}
 						visibleCarouselSlidesOnMobile={2}
 						visibleCarouselSlidesOnTablet={4}
 						sectionId={'sectionId'}