Puzzles/Polish the Puzzles and Games hub responsive layout

[gustavo-olmedo]

What does this change?

• Updates the Puzzles and Games header with the new illustrated artwork.

• Selects suitable header artwork for each responsive breakpoint and keeps header-tablet-768px consistent throughout the 740–979px range.

• Sets the header height to 230px and uses the Opinion background colour, #fef9f5.

• Improves header positioning and image quality at desktop, leftCol and wide breakpoints.

• Updates puzzle cards with their corresponding illustrations, colours and responsive dimensions.

• Adds crossword setter names to crossword cards when available.

• Adds alternative text to the header image and hides decorative card images from screen readers.

• Updates the daily featured cards to use their corresponding puzzle artwork.

• Adds the required horizontal and vertical separators between puzzle cards at each breakpoint.

• Aligns category content with the Guardian grid across tablet, desktop, leftCol and wide.

• Updates the crossword archive dropdown with:

  • A fixed SVG chevron.
  • Consistent open and closed positioning.
  • Outside-click dismissal.
  • Escape-key dismissal.
  • Keyboard-accessible behaviour.

• Adds Crossword Blog and Support the Guardian links beneath the crossword section at leftCol and wide.

• Updates Useful links to show Support the Guardian and Help Centre.

• Keeps the newsletter and Most popular puzzles implementations available but hidden for now.

• Aligns the Useful links divider with the puzzle-card divider at the wide breakpoint.

Why?

These changes bring the existing Puzzles and Games hub closer to the supplied designs across all supported breakpoints.

They address inconsistent card dimensions, low-resolution or misaligned header artwork, missing separators, archive-menu behaviour and grid alignment. They also improve accessibility by providing appropriate image semantics and keyboard behaviour.

How has this change been tested?

• Added and updated Jest tests covering:

  • Responsive header sources and image URLs.
  • The fixed header height and background colour.
  • Header alternative text.
  • Puzzle-card images and setter names.
  • Supporting-content visibility.
  • Useful links.
  • Archive-menu rendering and interactions.
  • Outside-click and Escape-key dismissal.

• Ran the Dotcom Rendering test suite locally while developing the changes.

• Manually checked the layout at mobile, phablet, tablet, desktop, leftCol and wide widths.

• Compared card dimensions, separators, header positioning and container alignment against the supplied reference screenshots.

• Manually verified the archive menu with pointer and keyboard interactions.

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:fe2ce482e2c7167cd25701a0e3d268b031c9fc05d473e304bd3f0f09d2f4207b

🐛 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:fe2ce482e2c7167cd25701a0e3d268b031c9fc05d473e304bd3f0f09d2f4207b"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-puzzles-images-sizing-accesibility-setters"

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

# 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 31203 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 3188 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 3188 of dotcom:ab-testing to CODE
• Deploy parts of build 3188 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 7 minutes and 14 seconds ago) Please check your changes!