WS-2471-Fix whitespace above PV curation heading#13895
WS-2471-Fix whitespace above PV curation heading#13895Nabeel1276 wants to merge 3 commits intolatestfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Adjusts the ContinueReadingButton spacing to fix the whitespace above the PV curation heading, tuning margins across responsive breakpoints.
Changes:
- Replaces negative bottom margin with positive bottom margin on the continue reading button.
- Adds a
mq.GROUP_3_MIN_WIDTHoverride to use a different bottom margin on larger viewports.
| @@ -33,10 +33,14 @@ export default { | |||
| }, | |||
|
|
|||
| [mq.GROUP_1_MAX_WIDTH]: { | |||
| margin: `0 ${spacings.FULL}rem -${spacings.HALF}rem ${spacings.FULL}rem`, | |||
| margin: `0 ${spacings.FULL}rem ${pixelsToRem(36)}rem ${spacings.FULL}rem`, | |||
| width: `calc(100% - ${spacings.DOUBLE}rem)`, | |||
| }, | |||
|
|
|||
| [mq.GROUP_3_MIN_WIDTH]: { | |||
| margin: `0 ${spacings.DOUBLE}rem ${pixelsToRem(20)}rem ${spacings.DOUBLE}rem`, | |||
| }, | |||
There was a problem hiding this comment.
The new bottom margins use hard-coded pixel values (36px/20px via pixelsToRem) that don’t map to the theme spacing scale (which is based on 8px steps). To keep spacing consistent and self-documenting, consider using existing spacings.* tokens where possible, or introduce a named constant in this file explaining why these non-standard values are required (e.g. alignment with PV curation heading).
| width: `calc(100% - ${spacings.QUADRUPLE}rem)`, | ||
| padding: `${spacings.DOUBLE}rem 0`, | ||
| margin: `0 ${spacings.DOUBLE}rem -${spacings.FULL}rem ${spacings.DOUBLE}rem`, | ||
| margin: `0 ${spacings.DOUBLE}rem ${pixelsToRem(36)}rem ${spacings.DOUBLE}rem`, |
There was a problem hiding this comment.
The PR description still contains the template placeholders (summary/code changes/testing) without concrete details. Please add a brief user-facing summary and explicit testing steps (e.g. which page to load and expected whitespace change) so reviewers can verify the visual adjustment reliably.
Resolves JIRA: https://bbc.atlassian.net/browse/WS-2471
Summary
A very high-level summary of easily-reproducible changes that can be understood by non-devs, and why these changes where made.
Code changes
Testing
Useful Links