-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
URLPopover: restore min-width style #59274
Conversation
I will give this PR a backport label. This is because this layout problem appeared in #57608, and I think it can also be considered a regression that occurred in WP6.5. |
3304352
to
9c264a8
Compare
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. |
Size Change: +17 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you share more steps to reproduce? I can't seem to get to the very broken looking state that you are seeing here. It looks very urgent to fix, so thank you for taking a look.
@@ -58,6 +58,7 @@ | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
margin-right: $grid-unit-10; | |||
min-width: 150px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you recall what the value was before?
The previous value was 150px and I have restored the same value in this PR.
Here's what I'm seeing. Especially the dropdown chevron looks like it's in a poor state, with the separator there: @richtabor since you've worked on this element, any instincts? |
Flaky tests detected in 9c264a8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8005088631
|
@jasmussen Sorry for the insufficient explanation. Below is a screencast in trunk. After entering the link, instead of pressing the "Edit" button, click the "Link settings" button. This PR solves this scenario. af1b922c789cbbe954f8d002e691a2cd.mp4 |
This issue should be resolved in #58906. we know I need to adjust the overall layout of this popover, but for WP6.5 I've broken it down into the smallest possible PRs. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the added context.
We might want to see if we can use a 300px min-width keeps a more stable experience, ideally the width of the popover doesn't change between editing and resting states. If 300 fixes that, feel free to slipstream that in. Otherwise, happy to land this as a fix for the regression.
Thanks for the review!
If we simply change it from 150px to 300px, the short URL preview popover feels very long to me. In the future, when working on more general improvements, we may be able to consider the ideal approach again. |
I just cherry-picked this PR to the cherry-pick-wp-6-5-beta-3 branch to get it included in the next release: eddf324 |
Follow up: #57608
Related to #58741
What?
This PR enforces a minimum width for
URLPopover
components and fixes unintended layout collapse.Why?
In #57608, the
URLPopover
component was redesigned. At that time, the CSS that enforces the minimum width appears to be lost.How?
I simply restored the original value.
Testing Instructions
Screenshots or screencast
Note
The misalignment of the separator when opening the link settings will be fixed with #58906.