[andresilva-guardian]

What does this change?

Updates the Puzzles archive dropdown (PuzzlesArchiveMenu) so it matches the design and stays fully visible on small screens:

• Row styling (from Figma): rows are now 45px tall (previously 60px), with 12px 16px padding, textSans15 text with a 19.5px line height and black text. The menu is 209px wide (previously 256px). Separators, border and background are unchanged.
• Mobile positioning: below the tablet breakpoint the label sits against the right edge, so the menu now opens leftwards (right: 0) and ends 20px from the right edge of the viewport. Previously it opened to the right and overflowed the screen. The section inset is 10px below mobileMedium and 20px from it, so the menu uses right: 10px below mobileMedium to keep the 20px.
• Upward opening: when the menu does not fit below the label and there is more room above it, it opens upwards (data-placement="top"). The check runs when the menu opens, using the label's position and the menu height. When it fits neither above nor below, it uses the side with more room.
• Storybook: adds PuzzlesArchiveMenu.island.stories.tsx with Closed, Open, OpenWithLongTitles and OpenUpwards stories, rendered at 320px, mobileLandscape, tablet and desktop, so Chromatic covers the open menu.

Why?

• The rows were noticeably taller than the design and the Guardian header dropdowns ("Can archive drop down list rows be less deep?").
• On mobile the menu overflowed the right side of the screen.
• On short screens, a menu opened near the bottom ran past the bottom of the viewport. The team asked for it to open upwards in those cases.

How has this change been tested?

• Ran the new stories in Storybook and measured the menu in the browser: with the menu open, all rows are 45px with 12px 16px padding and 15px text, and the menu is 209px wide.
• Below 740px the menu ends 20px from the right edge at 320px, 374px, 375px, 700px and 739px, with no horizontal scroll. From 740px it opens to the right of the label as before.
• At 375x667, with the label near the bottom, the menu opens upwards and fits entirely in the viewport. With the label near the top it opens downwards. At 375x400, where it fits neither way, it opens downwards.
• PuzzlesDirectory unit tests, type check and Prettier pass.

Screenshots

Before	After

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:d0d45f1d50402c67b421842226371709fec280826411e96ebe5d12ef7bc9cc88

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

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-afs-fix-puzzle-archive-dropdown"

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

# 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]

Deploy build 32903 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @andresilva-guardian 5 minutes and 6 seconds ago) Please check your changes!