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 874bcd1db65..6a75c5de159 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); @@ -114,7 +117,7 @@ const Header = ({ !isMediaOpen && isWithImageLayout && { gap: '2rem' }, ]} > - {isHeaderImage ? ( + {shouldRenderHeaderImage ? (