WS-2690 - Article OJ Padding [BUG FIX]

src/app/pages/ArticlePage/ArticlePage.styles.ts

@@ -59,6 +59,18 @@ export default {
       gridColumn: '1 / span 12',
       paddingBottom: '2rem',
     }),
+  collapsedArticleColumn: ({ mq }: Theme) =>
+    css({
+      paddingBottom: 0,
+
+      [`.${NO_JS_CLASSNAME} &, .${OPERA_MINI_CLASSNAME} &`]: {
+        paddingBottom: '2rem',
+      },
+
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingBottom: '2rem',
+      },
+    }),
   mainContent: ({ palette, spacings, mq }: Theme) =>
     css({
       paddingBottom: `${spacings.TRIPLE}rem`,
@@ -89,6 +101,22 @@ export default {
         },
       },
     }),
+  collapsedMainContent: ({ spacings, mq }: Theme) =>
+    css({
+      paddingBottom: 0,
+
+      [`.${NO_JS_CLASSNAME} &, .${OPERA_MINI_CLASSNAME} &`]: {
+        paddingBottom: `${spacings.TRIPLE}rem`,
+
+        [mq.GROUP_3_ONLY]: {
+          paddingBottom: `${spacings.FULL}rem`,
+        },
+      },
+
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingBottom: `${spacings.TRIPLE}rem`,
+      },
+    }),
   hideRelatedTopics: ({ mq }: Theme) =>
     css({
       display: 'none',

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -392,6 +392,9 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     pageData?.countryCuration?.summaries?.length,
   );
 
+  const shouldApplyCollapsedArticleSpacing =
+    showContinueReadingButton && !showAllContent;
+
   // EXPERIMENT: PWA Promotional Banner
   const shouldRenderPWAPromotionalBanner =
     !isTopBarOJsEnabled || !pageData?.secondaryColumn?.topStories?.length;
@@ -446,8 +449,19 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
       <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <ArticleMessageBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
-        <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
-          <main css={styles.mainContent} role="main">
+        <div
+          css={[
+            !isPGL ? styles.primaryColumn : styles.pglColumn,
+            shouldApplyCollapsedArticleSpacing && styles.collapsedArticleColumn,
+          ]}
+        >
+          <main
+            css={[
+              styles.mainContent,
+              shouldApplyCollapsedArticleSpacing && styles.collapsedMainContent,
+            ]}
+            role="main"
+          >
             <Blocks
               blocks={articleBlocks}
               componentsToRender={componentsToRender}