Puzzles hub: banner spacing at leftCol/wide and mobile card separators by andresilva-guardian · Pull Request #16953 · guardian/dotcom-rendering · GitHub
Skip to content

Puzzles hub: banner spacing at leftCol/wide and mobile card separators - #16953

Open
andresilva-guardian wants to merge 5 commits into
mainfrom
afs/puzzles-homepage-fix-critical-qa-issues
Open

andresilva-guardian wants to merge 5 commits into
mainfrom
afs/puzzles-homepage-fix-critical-qa-issues

Conversation

@andresilva-guardian

Copy link
Copy Markdown
Contributor

What does this change?

Fixes the following "should" priority issues from the Puzzles QA spreadsheet:
https://docs.google.com/spreadsheets/d/1kXDzncSNHru01oIU-kSvQntPcsQEFSkGsvgllrwHkhI/edit?gid=1669673750#gid=1669673750

Issue Fix
Padding between the bottom of the banner graphic and the featured cards container to be 8 on LeftCol and Wide The featured container had a 16px top inset from leftCol. Removed the override, so it uses the same 8px as the other containers.
For standard sized cards, the horizontal hairlines on Mobile, Mobile medium, Mobile landscape and Mobile phablet to sit 16px below the card above and 8px above the card below Below tablet, the gap between standard cards and between card groups is now 24px and the separator sits 8px above the card below. The nested containers (word games, logic puzzles) follow the same rule.
For small sized cards, the same hairlines to sit 8px below the card above and 6px above the card below Below tablet, compact card rows now have a 14px row gap and the separator sits 6px above the card below. The column gap and the vertical separators are unchanged.

From tablet upwards nothing changes.

Checked, no code change needed here

  • Padding between card title and top of card (4): cardTextStyles already has a 4px top padding at every breakpoint.
  • Padding between the bottom card and the drop down list (28 on Tablet, 20 on Mobile): PuzzlesArchiveMenu already has margin-top: 28px from tablet and 20px below it.

Why?

QA found these differences between the Puzzles hub and the designs.

How has this change been tested?

  • Jest: PuzzlesDirectory, PuzzlesSupporting, PuzzlesLayout, PuzzlesArchive and MorePuzzlesCard suites pass. eslint, stylelint and prettier report no errors on the changed files.
  • Not tested: in a browser at each breakpoint, with a screen reader, or on CODE.

Screenshots

Before After
before after

@andresilva-guardian andresilva-guardian self-assigned this Oct 15, 2026
@andresilva-guardian andresilva-guardian added run_chromatic Runs chromatic when label is applied feature Departmental tracking: work on a new feature labels Oct 15, 2026
@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:c0441754776e698cf7abd35e1c9c137a1b28d2e56822982e3ced6f18de79a4d1

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:c0441754776e698cf7abd35e1c9c137a1b28d2e56822982e3ced6f18de79a4d1"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-afs-puzzles-homepage-fix-critical-qa-issues"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-32868"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/artifacts --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

From guardian/actions-ecr.

@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Oct 15, 2026
@github-actions

github-actions Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

@gustavo-olmedo gustavo-olmedo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions

github-actions Bot commented Oct 16, 2026 •

Copy link
Copy Markdown

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants