WSTEAM1-1567: Change padding for large breakpoint AND Add 16px after Live label

src/app/components/LiveHeaderMedia/index.styles.tsx

@@ -3,10 +3,9 @@ import pixelsToRem from '#app/utilities/pixelsToRem';
 import { css, Theme } from '@emotion/react';
 
 export default {
-  componentContainer: ({ spacings }: Theme) =>
+  componentContainer: () =>
     css({
       width: '100%',
-      marginTop: `${spacings.DOUBLE}rem`,
       [`.${NO_JS_CLASSNAME} &`]: {
         display: 'none',
       },
@@ -27,6 +26,7 @@ export default {
     }),
   mediaButton: () =>
     css({
+      width: '100%',
       position: 'relative',
       padding: 0,
     }),

src/app/components/MaskedImage/styles.tsx

@@ -128,7 +128,6 @@ export default {
         insetInlineEnd: 0,
       },
     }),
-
   linearGradientLtr: ({ mq }: Theme) =>
     css({
       [mq.GROUP_4_MIN_WIDTH]: {
@@ -140,7 +139,6 @@ export default {
           270deg, ${extraWideMask})`, // 270deg for LTR
       },
     }),
-
   linearGradientRtl: ({ mq }: Theme) =>
     css({
       [mq.GROUP_4_MIN_WIDTH]: {

ws-nextjs-app/pages/[service]/live/[id]/Header/LiveLabelHeader/index.styles.ts

@@ -25,7 +25,13 @@ const styles = {
         color: 'canvasText',
       },
     }),
-  liveLabelTextWithImage: ({ palette, fontSizes, fontVariants, mq }: Theme) =>
+  liveLabelTextWithImage: ({
+    palette,
+    spacings,
+    fontSizes,
+    fontVariants,
+    mq,
+  }: Theme) =>
     css({
       'span:first-of-type': {
         color: palette.LIVE_LIGHT,
@@ -36,6 +42,9 @@ const styles = {
           ...fontSizes.paragon,
         },
       },
+      'span:nth-of-type(3)': {
+        marginTop: `${spacings.DOUBLE}rem`,
+      },
     }),
   liveLabelTextWithoutImage: ({
     mq,

ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx

@@ -29,14 +29,15 @@ const Header = ({
 }) => {
   const [isMediaOpen, setLiveMediaOpen] = useState(false);
   const isHeaderImage = !!imageUrl && !!imageUrlTemplate && !!imageWidth;
+  const isWithImageLayout = isHeaderImage || !!mediaCollections;
 
   const watchVideoClickHandler = () => {
     setLiveMediaOpen(!isMediaOpen);
   };
 
   const Title = (
     <span
-      css={isHeaderImage ? styles.titleWithImage : styles.titleWithoutImage}
+      css={isWithImageLayout ? styles.titleWithImage : styles.titleWithoutImage}
     >
       {title}
     </span>
@@ -48,18 +49,20 @@ const Header = ({
         <div css={styles.backgroundColor} />
       </div>
       <div css={styles.contentContainer}>
-        {isHeaderImage ? (
-          <MaskedImage
-            imageUrl={imageUrl}
-            imageUrlTemplate={imageUrlTemplate}
-            imageWidth={imageWidth}
-          />
-        ) : null}
+        <div css={[isMediaOpen && styles.hideMaskedImage]}>
+          {isHeaderImage ? (
+            <MaskedImage
+              imageUrl={imageUrl}
+              imageUrlTemplate={imageUrlTemplate}
+              imageWidth={imageWidth}
+            />
+          ) : null}
+        </div>
         <div
           css={[
-            isHeaderImage && styles.textContainerWithImage,
-            !isHeaderImage && styles.textContainerWithoutImage,
-            isMediaOpen && styles.textContainerMediaOpen,
+            isWithImageLayout && styles.textContainerWithImage,
+            !isWithImageLayout && styles.textContainerWithoutImage,
+            mediaCollections && styles.fixedHeight,
           ]}
         >
           <Heading
@@ -70,7 +73,7 @@ const Header = ({
             css={styles.heading}
           >
             {showLiveLabel ? (
-              <LiveLabelHeader isHeaderImage={isHeaderImage}>
+              <LiveLabelHeader isHeaderImage={isWithImageLayout}>
                 {Title}
               </LiveLabelHeader>
             ) : (
@@ -83,20 +86,22 @@ const Header = ({
               css={[
                 styles.description,
                 showLiveLabel &&
-                  !isHeaderImage &&
+                  !isWithImageLayout &&
                   styles.layoutWithLiveLabelNoImage,
               ]}
             >
               {description}
             </Text>
           )}
-          {mediaCollections && (
+        </div>
+        {mediaCollections && (
+          <div css={[styles.liveMedia, isMediaOpen && styles.liveMediaOpen]}>
             <LiveHeaderMedia
               mediaCollection={mediaCollections}
               clickCallback={watchVideoClickHandler}
             />
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx

@@ -17,6 +17,12 @@ export default {
         outline: 'none',
       },
     }),
+  hideMaskedImage: ({ mq }: Theme) =>
+    css({
+      [mq.GROUP_4_MIN_WIDTH]: {
+        opacity: 0,
+      },
+    }),
   backgroundContainer: () =>
     css({
       position: 'absolute',
@@ -42,12 +48,31 @@ export default {
         width: '100%',
       },
     }),
-  textContainerMediaOpen: ({ mq }: Theme) =>
+  liveMedia: ({ mq, spacings }: Theme) =>
+    css({
+      padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`,
+      [mq.GROUP_2_MIN_WIDTH]: {
+        padding: `0rem ${spacings.DOUBLE}rem ${spacings.DOUBLE}rem`,
+      },
+      [mq.GROUP_4_MIN_WIDTH]: {
+        padding: `${spacings.DOUBLE}rem  ${spacings.DOUBLE}rem ${pixelsToRem(40)}rem`,
+        maxWidth: '50%', // determines width of text overlay.
+      },
+    }),
+  liveMediaOpen: ({ mq }: Theme) =>
     css({
       [mq.GROUP_4_MIN_WIDTH]: {
         maxWidth: '100%',
       },
     }),
+  fixedHeight: ({ mq, spacings }: Theme) =>
+    css({
+      [mq.GROUP_4_MIN_WIDTH]: {
+        minHeight: '0',
+        padding: `${pixelsToRem(40)}rem ${spacings.DOUBLE}rem 0`,
+        maxWidth: '50%', // determines width of text overlay.
+      },
+    }),
   textContainerWithoutImage: ({ mq, gridWidths, spacings }: Theme) =>
     css({
       position: 'relative',
@@ -57,7 +82,6 @@ export default {
       [mq.GROUP_2_MIN_WIDTH]: {
         padding: `${spacings.DOUBLE}rem`,
       },
-
       [mq.GROUP_4_MIN_WIDTH]: {
         paddingTop: `${spacings.TRIPLE}rem`,
         paddingBottom: `${spacings.QUADRUPLE}rem`,