Skip to content

Re-flatten grid items in StandardLayoutArticleGrid DOM - #17183

Open
frederickobrien wants to merge 5 commits into
mainfrom
flatten-grid-items
Open

frederickobrien wants to merge 5 commits into
mainfrom
flatten-grid-items

Conversation

@frederickobrien

@frederickobrien frederickobrien commented Nov 6, 2026 •

Copy link
Copy Markdown
Contributor

This adjusts StandardLayoutArticleGrid to ensure all grid items are at the same level in the DOM. The spark for this was fixing an issue with the centre rule (pictured below) but on reflection a flat DOM structure feels like a cleaner, more flexible approach and one I think we ought to preserve. Browser support of display: contents; isn't great and in principle I think the less nesting the better.

image

I've refactored other parts of the code to (hopefully) ensure the portrait layout looks as it did with the previous configuration. I've also included in some right padding for meta elements in the portrait layout from leftCol up to ensure we don't ever have them squashed right up against the border.

Also chucked in: an immersive headline boldness fix.

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

github-actions Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

🚀 Image for dotcom-rendering pushed to AWS ECR

Image digest: sha256:7da07584af613345811edcd8876f6fff92eb05b1544ec9071d4b40505d8b1cbc

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

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-flatten-grid-items"

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

# 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 Nov 6, 2026
@github-actions

github-actions Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

@frederickobrien frederickobrien added the run_chromatic Runs chromatic when label is applied label Nov 6, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 6, 2026
@frederickobrien frederickobrien added the run_chromatic Runs chromatic when label is applied label Nov 6, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Nov 6, 2026
@frederickobrien frederickobrien changed the title Re-flatten grid items in DOM Re-flatten grid items in StandardLayoutArticleGrid DOM Nov 6, 2026
@frederickobrien
frederickobrien marked this pull request as ready for review November 6, 2026 13:50
@github-actions

github-actions Bot commented Nov 6, 2026

Copy link
Copy Markdown

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

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

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

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant