WS-2938: Remove padding on isLite for Banner [copilot]

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`,
         },
       },
     }),

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 ? (
           <div css={[isMediaOpen ? styles.hideImage : styles.headerImage]}>
             <Image
               alt=""

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,
       },
     }),
 };