UI/Dialog: add explicit margin-inline-end rule to Title#77334
Merged
Conversation
ciampo
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 7.74 MB ℹ️ View Unchanged
|
ciampo
force-pushed
the
fix/dialog-title-margin-inline-end
branch
from
42dbbb3 to
c2b6b29
Compare
ciampo
force-pushed
the
fix/dialog-title-margin-inline-end
branch
from
c2b6b29 to
70ee01f
Compare
The `.title` class relied solely on the `--_gcd-heading-margin` CSS variable to push trailing header elements to the end. This breaks once the global CSS defense layer is removed. Add a direct `margin-inline-end: auto` rule so the header flex layout is preserved independently of GCD styles. Follow-up to #77161, addressing review feedback from @mirka. Made-with: Cursor
ciampo
force-pushed
the
fix/dialog-title-margin-inline-end
branch
from
70ee01f to
1429891
Compare
ciampo
changed the title
margin-inline-end rule to Title
|
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. |
|
Flaky tests detected in 1429891. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24406645336
|
juanfra
approved these changes
Apr 14, 2026
Member
juanfra
left a comment
juanfra
left a comment
There was a problem hiding this comment.
LGTM, thanks ✅
Code looks good. Confirmed the trailing elements (close, in the basic case) is pushed to the end.
dialog-close.mp4
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?
Follow-up to #77161, addressing review feedback.
Adds a direct
margin-inline-end: autoCSS rule toDialog.Titleso the header flex layout works independently of global CSS defense (GCD) styles.Why?
The
.titleclass currently relies solely on the--_gcd-heading-marginCSS variable to push trailing header elements to the end. Once the GCD layer is eventually removed, there would be nomargin-inline-endrule, breaking the header layout.How?
Adds
margin-inline-end: autoalongside the existing--_gcd-heading-marginworkaround. While GCD is active, its shorthandmarginoverrides the longhand — so the variable is still needed. Once GCD is removed, the direct rule takes over.Testing Instructions
Dialogwith a title and a close button (or other trailing elements) in the header.Use of AI Tools
Cursor + Claude Opus 4.6