Skip to content

Fix the series tag and border issue - #17154

Closed
joshuaguardian wants to merge 13 commits into
mainfrom
fix/design-feedback
Closed

joshuaguardian wants to merge 13 commits into
mainfrom
fix/design-feedback

Conversation

@joshuaguardian

@joshuaguardian joshuaguardian commented Nov 4, 2026 •

Copy link
Copy Markdown
Contributor

What does this change?

Fix the series tag and border issue

Why?

Didnt match designs

How has this change been tested?

Tested locally manually and in chromatic

Screenshots

@joshuaguardian joshuaguardian self-assigned this Nov 4, 2026
@joshuaguardian joshuaguardian added run_chromatic Runs chromatic when label is applied maintenance Departmental tracking: maintenance work, not a fix or a feature labels Nov 4, 2026
@github-actions

github-actions Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

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

github-actions Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

🚀 Image pushed to AWS ECR

Image digest: sha256:beee3fed1ffd58762e2a657dd720238d87cca02562d615fb2ac6dfdd1bec6da5

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

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-fix-design-feedback"

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

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

@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 4, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 4, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions

github-actions Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added run_chromatic Runs chromatic when label is applied and removed run_chromatic Runs chromatic when label is applied labels Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian
joshuaguardian requested a balanced review from Copilot November 5, 2026 17:02
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026

Copilot AI 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.

🟡 Changes recommended

Legacy immersive articles omit layoutType, causing wrapped series tags to lose their 28px line height and crowd the padded backgrounds.

1 open issue
What changed in this PR

This PR adjusts series-tag styling and article-grid borders to better match the designs, focusing on immersive portrait and landscape layouts.

Changes:

  • Refines series-tag spacing, padding, positioning, and responsive line heights.
  • Adjusts immersive grid borders and portrait title-rule alignment.
  • Adds Storybook examples for standard, gallery, and immersive tags, including wrapped titles.
File Description
dotcom-rendering/​src/​layouts/​StandardLayoutArticleGrid.tsx Adjusts immersive centre rules and removes the portrait negative margin.
dotcom-rendering/​src/​components/​SeriesSectionLink.tsx Updates responsive series-tag styling and layout-specific spacing.
dotcom-rendering/​src/​components/​SeriesSectionLink.stories.tsx Adds visual examples across layouts and viewport sizes.
dotcom-rendering/​src/​components/​ArticleTitle.tsx Refines immersive title margins and portrait rule alignment.

Review effort: Balanced

@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@joshuaguardian joshuaguardian added the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

maintenance Departmental tracking: maintenance work, not a fix or a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants