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 }) => {