UI Notice: let description and actions span icon column at narrow widths#76202
Merged
UI Notice: let description and actions span icon column at narrow widths#76202
Conversation
Use a container query to allow the description and actions to span across the icon column when the Notice is rendered in a narrow container, giving them the full available width. Made-with: Cursor
Only span the description and actions across the icon column at narrow widths when a title is present. Without a title, the icon pairs directly with the description, so the original column layout is preserved. Made-with: Cursor
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. |
jameskoster
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 6.89 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 9f9e54a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22800029210
|
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
The
Noticecomponent in the@wordpress/uipackage has a three-column CSS grid layout (auto 1fr auto) where the icon occupies the first column. At narrow widths, this icon column indents the description and actions, wasting valuable horizontal space. This PR adjusts the layout so the description and actions span the icon column reducing wasted space.Why
When the
Noticeis rendered in a narrow container, the description and action buttons are the content most likely to need the full available width. The icon carries important semantic meaning (communicating intent beyond color alone), so hiding it is not desirable. Instead, only the title (which should be relatively short) should remain indented next to the icon.How
container-type: inline-sizeto.noticeto enable container queries.@container (max-width: 320px)rule that setsgrid-column: 1 / 3on.descriptionand.actions, allowing them to span across both the icon and content columns at narrow widths.320pxthreshold should be replaced with ameasuretoken from the Theme package.Testing Instructions
When the Notice omits a title the current layout is applied.