Refine Puzzles and Games layout and archive menu

[gustavo-olmedo]

What does this change?

• Adds 16px of spacing between the illustrated banner and the featured puzzle cards at the left-column and wide breakpoints.
• Limits the vertical hairline beside each section heading to the height of that section’s puzzle content.
• Reduces the padding above puzzle card titles to 4px.
• Updates tablet section labels to use 6px of padding above and 12px below.
• Updates the card test data and assertions to use “Today” instead of “Daily”.
• Rotates the archive chevron upwards while the dropdown is open and restores it to the downward position when closed.

Why?

These changes bring the Puzzles and Games hub closer to the agreed designs across responsive breakpoints.

The adjusted spacing and dividers make each puzzle category visually clearer, while the shallower card-title padding better matches the intended card presentation. The archive chevron now communicates whether the menu is open or closed.

How has this change been tested?

• Updated the existing PuzzlesDirectory component assertions to expect the new “Today” label.
• Manually checked the responsive layout and archive-menu presentation against the supplied designs.
• A complete local Jest run is passed.

Screenshots

Before:

After:

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:1ef991ceef910c7293e107612cd83fbb9a9f68eb988d21e7bf2b961c46c2fe59

🐛 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:1ef991ceef910c7293e107612cd83fbb9a9f68eb988d21e7bf2b961c46c2fe59"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-puzzles-main-page-fixes"

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

# 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${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-publish-image.

[github-actions]

Deploy build 31312 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 31312 of dotcom:rendering-all to CODE
• Deploy parts of build 31312 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 3250 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 3250 of dotcom:ab-testing to CODE
• Deploy parts of build 3250 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @gustavo-olmedo 8 minutes and 34 seconds ago) Please check your changes!