From 88975cbba7e465bb8b94b100f43635f531d1d010 Mon Sep 17 00:00:00 2001
From: emilysaffron <emily.saffron@bbc.co.uk>
Date: Tue, 5 Mar 2024 12:07:20 +0000
Subject: [PATCH] align live label but in a much simpler way than before

---
 .../[id]/Header/LiveLabelHeader/index.styles.ts | 15 ++++++++++-----
 .../pages/[service]/live/[id]/Header/styles.tsx |  3 +++
 .../live/[id]/__snapshots__/live.test.tsx.snap  | 17 ++++++++++++++---
 3 files changed, 27 insertions(+), 8 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 6423ce68e60..b5661d1e2f8 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,6 +1,5 @@
 import { css, Theme } from '@emotion/react';
 import { HALF, QUADRUPLE } from '#app/components/ThemeProvider/spacings';
-import pixelsToRem from '#app/utilities/pixelsToRem';
 
 const PULSE_END_MARGIN = HALF;
 const PULSE_SIZE_3_4 = QUADRUPLE;
@@ -12,15 +11,13 @@ const styles = {
       width: `${spacings.HALF + spacings.DOUBLE}rem`,
       height: `${spacings.HALF + spacings.DOUBLE}rem`,
       color: palette.LIVE_LIGHT,
-      verticalAlign: `${pixelsToRem(-5)}rem`,
+      verticalAlign: 'middle',
       marginInlineEnd: `${PULSE_END_MARGIN}rem`,
       [mq.GROUP_1_MIN_WIDTH]: {
-        verticalAlign: `${pixelsToRem(-7)}rem`,
         width: `${spacings.TRIPLE}rem`,
         height: `${spacings.TRIPLE}rem`,
       },
       [mq.GROUP_3_MIN_WIDTH]: {
-        verticalAlign: `${pixelsToRem(-8)}rem`,
         width: `${spacings.QUADRUPLE}rem`,
         height: `${spacings.QUADRUPLE}rem`,
       },
@@ -30,15 +27,23 @@ const styles = {
     }),
   liveLabelTextWithImage: ({ palette }: Theme) =>
     css({
-      'span:first-of-type': { color: palette.LIVE_LIGHT },
+      'span:first-of-type': {
+        color: palette.LIVE_LIGHT,
+        verticalAlign: 'middle',
+        display: 'inline',
+      },
     }),
   liveLabelTextWithoutImage: ({ mq, palette }: Theme) =>
     css({
       'span:first-of-type': {
         display: 'inline-flex',
         color: palette.LIVE_LIGHT,
+        verticalAlign: 'middle',
         'overflow-wrap': 'anywhere',
         marginInlineEnd: '0',
+        [mq.GROUP_0_MAX_WIDTH]: {
+          display: 'inline',
+        },
         [mq.GROUP_4_MIN_WIDTH]: {
           width: `calc(100% / 3  - ${PULSE_SIZE_TOTAL_WIDTH_3_MIN}rem)`,
         },
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 0af607c26af..3664c0c527f 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
+++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
@@ -79,6 +79,9 @@ export default {
       display: 'block',
       color: palette.GREY_1,
       marginTop: `${spacings.DOUBLE}rem`,
+      [mq.GROUP_0_MAX_WIDTH]: {
+        marginTop: `${spacings.FULL}rem`,
+      },
       [mq.GROUP_4_MIN_WIDTH]: {
         width: 'calc(100% / 3 * 2)',
         display: 'inline-flex',
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
index f193b6dcd2f..962306f0c1a 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
+++ b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
@@ -111,14 +111,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   width: 1.25rem;
   height: 1.25rem;
   color: #00CCC7;
-  vertical-align: -0.3125rem;
+  vertical-align: middle;
   -webkit-margin-end: 0.25rem;
   margin-inline-end: 0.25rem;
 }
 
 @media (min-width: 15rem) {
   .emotion-6 {
-    vertical-align: -0.4375rem;
     width: 1.5rem;
     height: 1.5rem;
   }
@@ -126,7 +125,6 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 
 @media (min-width: 37.5rem) {
   .emotion-6 {
-    vertical-align: -0.5rem;
     width: 2rem;
     height: 2rem;
   }
@@ -151,11 +149,18 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   color: #00CCC7;
+  vertical-align: middle;
   overflow-wrap: anywhere;
   -webkit-margin-end: 0;
   margin-inline-end: 0;
 }
 
+@media (max-width: 14.9375rem) {
+  .emotion-8 span:first-of-type {
+    display: inline;
+  }
+}
+
 @media (min-width: 63rem) {
   .emotion-8 span:first-of-type {
     width: calc(100% / 3  - 2.25rem);
@@ -195,6 +200,12 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   margin-top: 1rem;
 }
 
+@media (max-width: 14.9375rem) {
+  .emotion-11 {
+    margin-top: 0.5rem;
+  }
+}
+
 @media (min-width: 63rem) {
   .emotion-11 {
     width: calc(100% / 3 * 2);