WS-2690 - Article OJ Padding [BUG FIX]#14159
Open
pvaliani wants to merge 3 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes WS-2690 by preventing “stacked” bottom padding when an article is collapsed behind the Continue Reading button and an onward-journey component renders immediately after the collapsed area, while preserving existing behaviour for desktop, no-JS, and Opera Mini.
Changes:
- Adds a derived flag to detect the “collapsed article” state (Continue Reading enabled + content still hidden).
- Applies additional Emotion styles to remove
<main>and primary column bottom padding while collapsed. - Restores the original padding rules for desktop breakpoints and no-JS/Opera Mini fallbacks.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/app/pages/ArticlePage/ArticlePage.tsx | Adds conditional styling hooks on the primary column and <main> when the article is collapsed. |
| src/app/pages/ArticlePage/ArticlePage.styles.ts | Introduces collapsedArticleColumn and collapsedMainContent styles to remove/restore padding based on collapse state and platform fallbacks. |
Comment on lines
+447
to
+448
| const useCollapsedArticleSpacing = | ||
| showContinueReadingButton && !showAllContent; |
Comment on lines
+504
to
+514
| <div | ||
| css={[ | ||
| !isPGL ? styles.primaryColumn : styles.pglColumn, | ||
| useCollapsedArticleSpacing && styles.collapsedArticleColumn, | ||
| ]} | ||
| > | ||
| <main | ||
| css={[ | ||
| styles.mainContent, | ||
| useCollapsedArticleSpacing && styles.collapsedMainContent, | ||
| ]} |
Contributor
There was a problem hiding this comment.
Is continue reading rendered within the <main> element? If so why does the continue reading component have any bottom padding at all? Can't you just have no bottom padding on it and keep the <main> padding of the article? Instead of having this collapsed article logic?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves JIRA:
https://bbc.atlassian.net/browse/WS-2690
Summary
Code changes
Problem
On mobile, the Continue Reading button hides the remaining article content inside
<main>, but the article layout still kept its normal bottom padding. The primary article column also kept its own bottom padding. When an OJ such as Top Stories, Portrait Video Carousel, or Related Content rendered after the collapsed article area, its own spacing stacked with the hidden article/layout padding, causing large inconsistent gaps.Fix
Added collapsed-article spacing styles to
ArticlePage:<main>bottom padding while the article is collapsedThis is handled at the article layout level rather than patching individual OJs, because the extra gap seems to have come from from the shared article
Testing
http://localhost.com:7081/mundo/articles/cly7qe4542xo?renderer_env=live
http://localhost.bbc.com:7081/hausa/articles/cgepxyl21g3o?renderer_env=live
It was difficult to find a Hausa article that had the same OJ as the Mundo one for like-for-like comparison.
The current fix removes the unintended stacked layout padding from the collapsed article area. The remaining difference between Mundo and Hausa appears to come from the OJs’ own section-label spacing: Related Content has default top margin, while Top Stories overrides it to zero. If going forward the requirement is that every first OJ after Continue Reading should align identically, we need a follow-up decision/change to standardise the 1st OJ spacing. The current fix just removes extra hidden article padding
Screen.Recording.2026-06-26.at.09.40.21.mov
Useful Links