From 48b4d74d686dae7dc686f3bde7bb9a124c400ecc Mon Sep 17 00:00:00 2001
From: Pedram Valiani <pedram.valiani@bbc.co.uk>
Date: Fri, 26 Jun 2026 07:58:16 +0100
Subject: [PATCH 1/2] add collapsed article spacing style to resolve additional
 padding issue

---
 .../pages/ArticlePage/ArticlePage.styles.ts   | 28 +++++++++++++++++++
 src/app/pages/ArticlePage/ArticlePage.tsx     | 18 ++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

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 5717b98c674..fb280b961f7 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -444,6 +444,9 @@ const ArticlePage = ({
     pageData?.countryCuration?.summaries?.length,
   );
 
+  const useCollapsedArticleSpacing =
+    showContinueReadingButton && !showAllContent;
+
   // EXPERIMENT: PWA Promotional Banner
   const shouldRenderPWAPromotionalBanner =
     !isTopBarOJsEnabled || !pageData?.secondaryColumn?.topStories?.length;
@@ -498,8 +501,19 @@ const ArticlePage = ({
       <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,
+            useCollapsedArticleSpacing && styles.collapsedArticleColumn,
+          ]}
+        >
+          <main
+            css={[
+              styles.mainContent,
+              useCollapsedArticleSpacing && styles.collapsedMainContent,
+            ]}
+            role="main"
+          >
             <Blocks
               blocks={articleBlocks}
               componentsToRender={componentsToRender}

From 918ccbd33223677ce8dfe857cd797cfb52c37988 Mon Sep 17 00:00:00 2001
From: Pedram Valiani <pedram.valiani@bbc.co.uk>
Date: Wed, 8 Jul 2026 09:32:29 +0100
Subject: [PATCH 2/2] update naming change based on copilot suggestion

---
 src/app/pages/ArticlePage/ArticlePage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx
index 8bcb88d75df..24af8dc02bc 100644
--- a/src/app/pages/ArticlePage/ArticlePage.tsx
+++ b/src/app/pages/ArticlePage/ArticlePage.tsx
@@ -389,7 +389,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
     pageData?.countryCuration?.summaries?.length,
   );
 
-  const useCollapsedArticleSpacing =
+  const shouldApplyCollapsedArticleSpacing =
     showContinueReadingButton && !showAllContent;
 
   // EXPERIMENT: PWA Promotional Banner
@@ -449,13 +449,13 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
         <div
           css={[
             !isPGL ? styles.primaryColumn : styles.pglColumn,
-            useCollapsedArticleSpacing && styles.collapsedArticleColumn,
+            shouldApplyCollapsedArticleSpacing && styles.collapsedArticleColumn,
           ]}
         >
           <main
             css={[
               styles.mainContent,
-              useCollapsedArticleSpacing && styles.collapsedMainContent,
+              shouldApplyCollapsedArticleSpacing && styles.collapsedMainContent,
             ]}
             role="main"
           >