diff --git a/src/app/pages/ArticlePage/ArticlePage.styles.ts b/src/app/pages/ArticlePage/ArticlePage.styles.ts index 6450b38c07a..784d53d8fb3 100644 --- a/src/app/pages/ArticlePage/ArticlePage.styles.ts +++ b/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', diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index bda15c29eec..5ac654961dc 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/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 }) => {
-
-
+
+