Skip to content

overflowWrap: 'anywhere' for CardHeadlines#16044

Open
dblatcher wants to merge 3 commits into
mainfrom
dblatcher-overflowing-word-in-card-fix
Open

overflowWrap: 'anywhere' for CardHeadlines#16044
dblatcher wants to merge 3 commits into
mainfrom
dblatcher-overflowing-word-in-card-fix

Conversation

@dblatcher
Copy link
Copy Markdown
Contributor

What does this change?

Applies overflowWrap: 'anywhere' the the h3 in CardHeadlines

Why?

Fixes an issue noted by CP.

Open https://www.theguardian.com/world/2026/jun/03/sixty-thousand-love-letters-germany-archive-volunteers (or http://localhost:3030/Article/https://www.theguardian.com/world/2026/jun/03/sixty-thousand-love-letters-germany-archive-volunteers
running local DCR) and look at the "related stories" - it included this article which has a 64 letter word that breaks the layout and makes the image bigger than it should be.

Screenshots

Before After
Screenshot 2026-06-03 at 14 52 22 Screenshot 2026-06-03 at 14 53 18

@dblatcher dblatcher added run_chromatic Runs chromatic when label is applied fix Departmental tracking: fix labels Jun 3, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 3, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Member

@Jakeii Jakeii left a comment

Choose a reason for hiding this comment

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

I think we've use break-word in similar situations: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/components/ContainerTitle.tsx#L40

Also this is a great case for a story book story!

@paperboyo
Copy link
Copy Markdown
Contributor

Related: #14331 (comment)

@dblatcher
Copy link
Copy Markdown
Contributor Author

I think we've use break-word in similar situations: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/components/ContainerTitle.tsx#L40

Also this is a great case for a story book story!

Unfortunately, overflow-wrap: break-word doesn't work in the (rather extreme) case:
Screenshot 2026-06-04 at 09 37 23
Screenshot 2026-06-04 at 09 37 36

Definitely agree adding a story would be a great idea - but I could do with some help figuring out where to put it so it covers all the relevant themes, variants and contexts.

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

Labels

fix Departmental tracking: fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants