Skip to content

Fix labs front containers for pageskins #15077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
cemms1 merged 2 commits into from
Jan 5, 2026
Merged

Fix labs front containers for pageskins #15077

cemms1 merged 2 commits into from
Jan 5, 2026
+76 −18

Conversation

@cemms1
Copy link
Contributor

@cemms1 cemms1 commented Jan 5, 2026 •
edited
Loading

What does this change?

Ensures that the styles applying from leftCol are only applied where hasPageSkin is not true

Why?

There are visual issues on the UK Lifestyle front since the new labs header did not take into account necessary layout changes with page skins

Screenshots

Before After
before after

@cemms1 cemms1 added the fix Departmental tracking: fix label Jan 5, 2026
@cemms1 cemms1 marked this pull request as ready for review January 5, 2026 15:45
@cemms1 cemms1 requested a review from a team as a code owner January 5, 2026 15:45
@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Jan 5, 2026
cemms1
cemms1 commented Jan 5, 2026
View reviewed changes
dotcom-rendering/src/components/LabsSectionHeader.tsx
`;

const positionStyles = css`
const positionStyles = (hasPageSkin: boolean) => css`
Copy link
Contributor Author

@cemms1 cemms1 Jan 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the Details component does not accept arrays of Emotion CSS (SerializedStyles) for the positionStyles prop, so we need to use a function here instead of multiple conditional styles as we would normally do elsewhere

@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 5, 2026
@github-actions
Copy link

github-actions bot commented Jan 5, 2026 •
edited
Loading

Deploy build 23508 of dotcom:rendering-all to CODE

All deployment options

From guardian/actions-riff-raff.

@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Jan 5, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 5, 2026
deedeeh
deedeeh approved these changes Jan 5, 2026
View reviewed changes
Copy link
Contributor

@deedeeh deedeeh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks good @cemms1 and the new story ✨ Now we shouldn't be worried when we have pageskins.

@cemms1 cemms1 merged commit fb0f74f into main Jan 5, 2026
24 checks passed
@cemms1 cemms1 deleted the cemms1/fix-labs-front-containers-for-pageskins branch January 5, 2026 16:20
@gu-prout
Copy link

gu-prout bot commented Jan 5, 2026

Seen on PROD (merged by @cemms1 7 minutes and 51 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@deedeeh deedeeh deedeeh approved these changes

Assignees

No one assigned

Labels

fix Departmental tracking: fix Seen-on-PROD

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@cemms1 @deedeeh