Card: Add overflow: clip to root container#76678
Merged
Conversation
Made-with: Cursor
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
changed the title
7 tasks
|
Size Change: 0 B Total Size: 7.66 MB ℹ️ View Unchanged
|
10 tasks
adamsilverstein
pushed a commit
that referenced
this pull request
Mar 31, 2026
* Card: Add overflow: clip to prevent content overflowing rounded corners Made-with: Cursor * Add PR link to CHANGELOG entry Made-with: Cursor ---
oandregal
changed the title
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
* Card: Add overflow: clip to prevent content overflowing rounded corners Made-with: Cursor * Add PR link to CHANGELOG entry Made-with: Cursor ---
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Extracted from #76282 (comment)
Add
overflow: cliptoCard.Rootin@wordpress/uiso that child content with opaque backgrounds doesn't visually overflow the card's rounded corners.Why?
Card.Roothas aborder-radiusbut no overflow clipping. When full-bleed content (viaCard.FullBleed) or any child with an opaque background extends to the card's edges, the rectangular background can "poke out" past the rounded corners, making them appear square.This is a common pattern in design system Card components — pairing
border-radiuswith overflow clipping to ensure visual consistency.How?
Added
overflow: clipto.rootin the Card's CSS module.overflow: clipis preferred overoverflow: hiddenbecause:hidden)position: stickybehavior inside the card (important for consumers like DataViews with sticky table headers)Testing Instructions
Screenshots
Note: for the sake of taking these screenshots, I applied
style={ { padding: 0, background: 'red' } }toCard.ContentNot the bottom left and bottom right corners of the card, and how the outer card radius is only respected after applying changes from this PR
AI tools
Cursor + Claude Opus 4.6