Merge pull request #11413 from bbc/WSTEAM1-847-figure-spacing

WSTEAM1-847: Live Page - Image Caption Spacing
bbc · Mar 22, 2024 · 005d731 · 005d731
2 parents 3e99c92 + 4f069ca
commit 005d731
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/app/components/MediaLoader/index.styles.ts b/src/app/components/MediaLoader/index.styles.ts
@@ -1,9 +1,12 @@
 import { css, Theme } from '@emotion/react';
 
 export default {
-  figure: css({
-    margin: 0,
-  }),
+  figure: ({ spacings }: Theme) =>
+    css({
+      margin: 0,
+      paddingBottom: `${spacings.TRIPLE}rem`,
+      width: '100%',
+    }),
   mediaContainer: ({ palette }: Theme) =>
     css({
       backgroundColor: palette.BLACK,

diff --git a/ws-nextjs-app/integration/pages/live/pidgin/__snapshots__/canonical.test.ts.snap b/ws-nextjs-app/integration/pages/live/pidgin/__snapshots__/canonical.test.ts.snap
@@ -330,7 +330,7 @@ exports[`Canonical Live Media Loader renders a placeholder 1`] = `
 
 exports[`Canonical Live Media Loader renders a valid container 1`] = `
 <figure
-  class="css-19ecbo0"
+  class="css-17euut"
   data-e2e="media-loader__container"
 >
   <style

diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Post/styles.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Post/styles.tsx
@@ -102,14 +102,14 @@ export default {
     }),
   bodyMedia: ({ spacings, mq }: Theme) =>
     css({
-      paddingLeft: `${spacings.FULL}rem`,
-      paddingRight: `${spacings.FULL}rem`,
+      padding: `0 ${spacings.FULL}rem ${spacings.DOUBLE}rem`,
       [mq.GROUP_2_MIN_WIDTH]: {
         paddingLeft: `${spacings.DOUBLE}rem`,
         paddingRight: `${spacings.DOUBLE}rem`,
       },
       [mq.GROUP_4_MIN_WIDTH]: {
-        padding: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
       },
     }),
 };