From 1ac655ac7be896890979dfa1d115d72afe9ac550 Mon Sep 17 00:00:00 2001 From: Shayne Ahchoon Date: Tue, 14 Jul 2026 14:48:46 +0100 Subject: [PATCH 1/2] WS-2938: Remove padding on isLite for Banner [copilot] --- .../pages/[service]/live/[id]/Header/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index 874bcd1db65..f3093ce5af0 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -5,6 +5,7 @@ import LiveHeaderMedia from '#app/components/LiveHeaderMedia'; import { MediaCollection } from '#app/components/MediaLoader/types'; import VisuallyHiddenText from '#app/components/VisuallyHiddenText'; import { ServiceContext } from '#app/contexts/ServiceContext'; +import { RequestContext } from '#app/contexts/RequestContext'; import Image from '#app/components/Image'; import buildIChefURL from '#app/lib/utilities/ichefURL'; import { createSrcsets } from '#app/lib/utilities/srcSet'; @@ -33,8 +34,10 @@ const Header = ({ showSportData?: boolean; }) => { const [isMediaOpen, setLiveMediaOpen] = useState(false); - const isHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth; - const isWithImageLayout = isHeaderImage || !!mediaCollections; + const { isLite } = use(RequestContext); + const hasHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth; + const shouldRenderHeaderImage = hasHeaderImage && !isLite; + const isWithImageLayout = shouldRenderHeaderImage || !!mediaCollections; const { translations: { sport: { matchSummary = 'Match Summary' } = {} }, } = use(ServiceContext); @@ -87,6 +90,7 @@ const Header = ({ {showLiveLabel ? ( {title} @@ -114,7 +118,7 @@ const Header = ({ !isMediaOpen && isWithImageLayout && { gap: '2rem' }, ]} > - {isHeaderImage ? ( + {shouldRenderHeaderImage ? (
{Title} From aad74e806bc2cd6ff1f861c1966d4d0b276b3813 Mon Sep 17 00:00:00 2001 From: holchris Date: Fri, 17 Jul 2026 12:28:30 +0100 Subject: [PATCH 2/2] live pulse placement edit --- .../Header/LiveLabelHeader/index.styles.ts | 22 +++++++++++-------- .../[service]/live/[id]/Header/index.tsx | 2 -- .../[service]/live/[id]/Header/styles.tsx | 20 +++++++++-------- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts index f7ec1f50251..61bd764acc5 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts @@ -1,14 +1,12 @@ import { css, Theme } from '@emotion/react'; -import { HALF, QUADRUPLE } from '#app/components/ThemeProvider/spacings'; +import { HALF } from '#app/components/ThemeProvider/spacings'; const PULSE_END_MARGIN = HALF; -const PULSE_SIZE_3_4 = QUADRUPLE; -const PULSE_SIZE_TOTAL_WIDTH_3_MIN = PULSE_END_MARGIN + PULSE_SIZE_3_4; const styles = { liveLabelContainer: ({ mq, spacings }: Theme) => css({ - textAlign: 'center', + textAlign: 'start', paddingTop: `${spacings.DOUBLE}rem`, [mq.GROUP_3_MIN_WIDTH]: { paddingTop: `${spacings.TRIPLE}rem`, @@ -45,13 +43,16 @@ const styles = { }, }, }), - liveLabelTextWithImage: ({ spacings }: Theme) => + liveLabelTextWithImage: ({ mq, spacings }: Theme) => css({ 'span:first-of-type': { display: 'inline', }, 'span:nth-of-type(3)': { - marginTop: `${spacings.DOUBLE}rem`, + [mq.GROUP_4_MIN_WIDTH]: { + display: 'block', + marginTop: `${spacings.DOUBLE}rem`, + }, }, }), liveLabelTextWithoutImage: ({ mq, fontSizes, fontVariants }: Theme) => @@ -64,12 +65,15 @@ const styles = { display: 'inline', }, [mq.GROUP_4_MIN_WIDTH]: { - width: `calc(100% / 3 - ${PULSE_SIZE_TOTAL_WIDTH_3_MIN}rem)`, + display: 'inline-flex', ...fontVariants.sansBold, ...fontSizes.paragon, }, - [mq.GROUP_5_MIN_WIDTH]: { - width: `calc(25% - ${PULSE_SIZE_TOTAL_WIDTH_3_MIN}rem)`, + }, + 'span:nth-of-type(3)': { + [mq.GROUP_4_MIN_WIDTH]: { + display: 'block', + marginTop: `${HALF * 2}rem`, }, }, }), diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx index f3093ce5af0..6a75c5de159 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx @@ -90,7 +90,6 @@ const Header = ({ {showLiveLabel ? ( {title} @@ -160,7 +159,6 @@ const Header = ({ {showLiveLabel ? ( {Title} diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx index 3f5733b1961..0be52c6be8f 100644 --- a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx +++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx @@ -1,6 +1,8 @@ import { css, Theme } from '@emotion/react'; import pixelsToRem from '../../../../../../src/app/utilities/pixelsToRem'; +const BANNER_MAX_WIDTH_ABOVE_1280PX = '63rem'; + export default { headerContainer: () => css({ @@ -46,16 +48,16 @@ export default { css({ backgroundColor: palette.GREY_16, // non-concise view background colour - MVP }), - contentContainer: ({ mq, gridWidths }: Theme) => + contentContainer: ({ mq, spacings }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { - maxWidth: `${pixelsToRem(gridWidths[1280])}rem`, + maxWidth: `calc(${BANNER_MAX_WIDTH_ABOVE_1280PX} + ${spacings.QUADRUPLE}rem)`, margin: '0 auto', position: 'relative', width: '100%', }, }), - contentWithImageContainer: ({ gridWidths, mq, spacings }: Theme) => + contentWithImageContainer: ({ mq, spacings }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { display: 'flex', @@ -65,7 +67,7 @@ export default { boxSizing: 'border-box', padding: `0 ${spacings.DOUBLE}rem`, margin: '0 auto', - maxWidth: `${pixelsToRem(gridWidths[1280])}rem`, + maxWidth: `calc(${BANNER_MAX_WIDTH_ABOVE_1280PX} + ${spacings.QUADRUPLE}rem)`, }, [mq.GROUP_4_ONLY]: { alignItems: 'center', @@ -118,11 +120,11 @@ export default { flexDirection: 'column', width: '100%', }), - textContainerWithoutImage: ({ mq, gridWidths, spacings }: Theme) => + textContainerWithoutImage: ({ mq, spacings }: Theme) => css({ position: 'relative', padding: `${spacings.DOUBLE}rem ${spacings.FULL}rem`, - maxWidth: `${pixelsToRem(gridWidths[1280])}rem`, + maxWidth: `calc(${BANNER_MAX_WIDTH_ABOVE_1280PX} + ${spacings.QUADRUPLE}rem)`, margin: '0 auto', [mq.GROUP_2_MIN_WIDTH]: { padding: `${spacings.DOUBLE}rem`, @@ -142,7 +144,7 @@ export default { display: 'flex', flexDirection: 'column', justifyContent: 'center', - padding: 0, + padding: `0 ${spacings.DOUBLE}rem`, }, }), titleWithImage: ({ palette }: Theme) => @@ -178,10 +180,10 @@ export default { layoutWithLiveLabelNoImage: ({ mq }: Theme) => css({ [mq.GROUP_4_MIN_WIDTH]: { - marginInlineStart: 'calc(100% / 3)', + marginInlineStart: 0, }, [mq.GROUP_5_MIN_WIDTH]: { - marginInlineStart: 'calc(100% / 4)', + marginInlineStart: 0, }, }), };