Merge pull request #11982 from bbc/WSTEAM1-1264-margin-resizing-issue

WSTEAM1-1264 Margin and resizing issue post dual script switcher update

src/app/components/Footer/index.styles.ts

@@ -1,8 +1,5 @@
 import { css, Theme } from '@emotion/react';
-import {
-  MARGIN_ABOVE_400PX,
-  MARGIN_BELOW_400PX,
-} from '../ThemeProvider/spacings';
+import { FULL } from '../ThemeProvider/spacings';
 import { GROUP_4_MIN_WIDTH_BP } from '../ThemeProvider/mediaQueries';
 
 const styles = {
@@ -20,17 +17,12 @@ const styles = {
       margin: 0,
       padding: `${spacings.DOUBLE}rem 0`,
     }),
-  siteWideLinksWrapper: ({ palette, mq, fontSizes, fontVariants }: Theme) =>
+  siteWideLinksWrapper: ({ palette, fontSizes, fontVariants }: Theme) =>
     css({
       ...fontSizes.brevier,
       ...fontVariants.sansRegular,
       backgroundColor: palette.EBON,
-      [mq.GROUP_2_MAX_WIDTH]: {
-        padding: `0 ${MARGIN_BELOW_400PX}`,
-      },
-      [mq.GROUP_2_MIN_WIDTH]: {
-        padding: `0 ${MARGIN_ABOVE_400PX}`,
-      },
+      padding: `0 ${FULL}rem`,
     }),
   ampCookieSettingButton: ({ palette, spacings, fontVariants }: Theme) =>
     css({

src/app/components/Header/ScriptLink/__snapshots__/index.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`Script Link should render correctly 1`] = `
   }
 }
 
-@media (max-width: 14.9375rem) {
+@media (max-width: 24.9375rem) {
   .emotion-0 {
     margin: 0.5rem 0 0.5rem 0;
   }

src/app/components/Header/ScriptLink/index.styles.ts

@@ -22,7 +22,7 @@ const styles = {
       [mq.GROUP_2_MIN_WIDTH]: {
         lineHeight: `calc(2.25rem - ${spacings.FULL}rem)`,
       },
-      [mq.GROUP_0_MAX_WIDTH]: {
+      [mq.GROUP_1_MAX_WIDTH]: {
         margin: `${spacings.FULL}rem 0 ${spacings.FULL}rem 0`,
       },
     }),

src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap

@@ -311,7 +311,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 @media (min-width: 15rem) {
   .emotion-18 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -864,7 +864,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
 @media (min-width: 15rem) {
   .emotion-140 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -891,6 +891,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   font-style: normal;
   font-weight: 400;
   background-color: #222222;
+  padding: 0 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -907,18 +908,6 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`]
   }
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-149 {
-    padding: 0 0.5rem;
-  }
-}
-
-@media (min-width: 25rem) {
-  .emotion-149 {
-    padding: 0 1rem;
-  }
-}
-
 .emotion-150 {
   max-width: 63rem;
   margin: 0 auto;

src/app/legacy/containers/Brand/__snapshots__/index.test.jsx.snap

@@ -13,7 +13,7 @@ exports[`BrandContainer should render correctly 1`] = `
 @media (min-width: 15rem) {
   .emotion-1 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 

src/app/legacy/containers/Brand/index.jsx

@@ -28,7 +28,6 @@ const BrandContainer = ({
   const svgRatio = brandSVG && brandSVG.ratio;
   const minWidth = svgRatio * svgMinHeight;
   const maxWidth = svgRatio * svgMaxHeight;
-
   return (
     <StyledBrand
       product={product}
@@ -40,6 +39,7 @@ const BrandContainer = ({
       url={`/${service}`}
       skipLink={skipLink}
       scriptLink={scriptLink}
+      longBrandWithVariant={service === 'serbian'}
       ref={brandRef}
       {...props}
     />

src/app/legacy/containers/Footer/__snapshots__/index.test.jsx.snap

@@ -43,7 +43,7 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
 @media (min-width: 15rem) {
   .emotion-3 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -168,6 +168,7 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
   font-style: normal;
   font-weight: 400;
   background-color: #222222;
+  padding: 0 0.5rem;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
@@ -184,18 +185,6 @@ exports[`FooterContainer snapshots should render correctly 1`] = `
   }
 }
 
-@media (max-width: 37.4375rem) {
-  .emotion-12 {
-    padding: 0 0.5rem;
-  }
-}
-
-@media (min-width: 25rem) {
-  .emotion-12 {
-    padding: 0 1rem;
-  }
-}
-
 .emotion-13 {
   max-width: 63rem;
   margin: 0 auto;

src/app/legacy/containers/Header/__snapshots__/index.test.jsx.snap

@@ -296,7 +296,7 @@ exports[`Header Snapshots should render correctly for WS frontpage 1`] = `
 @media (min-width: 15rem) {
   .emotion-17 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -1578,7 +1578,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = `
 @media (min-width: 15rem) {
   .emotion-17 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -2860,7 +2860,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = `
 @media (min-width: 15rem) {
   .emotion-17 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 

src/app/legacy/psammead/psammead-brand/src/__snapshots__/index.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`Brand should render correctly with link not provided 1`] = `
 @media (min-width: 15rem) {
   .emotion-0 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -139,7 +139,7 @@ exports[`Brand should render correctly with link provided 1`] = `
 @media (min-width: 15rem) {
   .emotion-0 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -307,7 +307,7 @@ exports[`Brand should render correctly with no service Localised Name 1`] = `
 @media (min-width: 15rem) {
   .emotion-0 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 
@@ -429,7 +429,7 @@ exports[`Brand should render correctly with transparent borders 1`] = `
 @media (min-width: 15rem) {
   .emotion-0 {
     height: 3.75rem;
-    padding: 0 1rem;
+    padding: 0 0.5rem;
   }
 }
 

src/app/legacy/psammead/psammead-brand/src/index.jsx

@@ -3,13 +3,13 @@ import styled from '@emotion/styled';
 import {
   GEL_GROUP_0_SCREEN_WIDTH_MAX,
   GEL_GROUP_1_SCREEN_WIDTH_MIN,
+  GEL_GROUP_1_SCREEN_WIDTH_MAX,
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
   GEL_GROUP_3_SCREEN_WIDTH_MIN,
 } from '#psammead/gel-foundations/src/breakpoints';
 import {
   GEL_SPACING_HLF,
   GEL_SPACING,
-  GEL_SPACING_DBL,
 } from '#psammead/gel-foundations/src/spacings';
 import { focusIndicatorThickness } from '../../../../components/ThemeProvider/focusIndicator';
 import VisuallyHiddenText from '../../../../components/VisuallyHiddenText';
@@ -29,7 +29,10 @@ const SvgWrapper = styled.div`
   max-width: ${SVG_WRAPPER_MAX_WIDTH_ABOVE_1280PX};
   margin: 0 auto;
 
-  @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {
+  @media (max-width: ${({ longBrandWithVariant }) =>
+      longBrandWithVariant
+        ? GEL_GROUP_1_SCREEN_WIDTH_MAX
+        : GEL_GROUP_0_SCREEN_WIDTH_MAX}) {
     display: block;
   }
 `;
@@ -42,14 +45,14 @@ const Banner = styled.div`
 
   @media (min-width: ${GEL_GROUP_1_SCREEN_WIDTH_MIN}) {
     height: ${60 / 16}rem;
-    padding: 0 ${GEL_SPACING_DBL};
+    padding: 0 ${GEL_SPACING};
   }
 
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
     height: ${64 / 16}rem;
   }
 
-  @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {
+  @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
     ${({ scriptLink }) => scriptLink && 'height: 100%'}
   }
 
@@ -89,7 +92,7 @@ const StyledLink = styled.a`
       props.theme.palette.BRAND_LOGO};
     outline: ${GEL_SPACING_HLF} solid ${props => props.theme.palette.BRAND_LOGO};
   }
-  @media (max-width: ${GEL_GROUP_0_SCREEN_WIDTH_MAX}) {
+  @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
     ${({ scriptLink }) =>
       scriptLink && `height: ${SIZE_OF_BRAND_LINK_WITH_VARIANT_BELOW_239PX}`}
   }
@@ -171,6 +174,7 @@ const Brand = forwardRef((props, ref) => {
     borderTop = false,
     borderBottom = false,
     scriptLink = null,
+    longBrandWithVariant = false,
     skipLink = null,
     linkId = null,
     ...rest
@@ -184,7 +188,7 @@ const Brand = forwardRef((props, ref) => {
       scriptLink={scriptLink}
       {...rest}
     >
-      <SvgWrapper ref={ref}>
+      <SvgWrapper ref={ref} longBrandWithVariant={longBrandWithVariant}>
         {url ? (
           <StyledLink
             href={url}