Repository navigation
Adjust vertical alignment of favorites button in install tab - #11817
shreyasikhar wants to merge 5 commits into
Conversation
…in install tab Co-authored-by: Copilot <copilot@github.com>
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
joedolson
left a comment
joedolson
left a comment
There was a problem hiding this comment.
I agree with @sabernhardt's comments about moving this to a different stylesheet. buttons.css should be primarily focused on the baseline styles for buttons, and exceptions belong elsewhere. I think that list-tables.css is the most appropriate place.
I also agree that setting vertical alignment may not be the best solution; it makes more sense to modernize to use flex layout.
|
Thanks @joedolson for pointing it out, I have addressed the feedback by updating the code. Also, updated the screenshot in the PR description after the change. |
sabernhardt
left a comment
sabernhardt
left a comment
There was a problem hiding this comment.
The Get Favorites button has a bottom margin when the screen is narrower than 782 pixels.
If the CSS switches to flex, I prefer how #11818 added a class to the paragraph tag and reused two existing rulesets that already set flex display and remove the margin.
|
Thanks @sabernhardt, I have made those changes and verified it. Please let me know if any feedback. |
There was a problem hiding this comment.
Test Report
Patch tested: https://github.com/WordPress/wordpress-develop/pull/11817.diff
Results
- ✅ The submit button is even with the input when in the same line.
- ✅ The label is centered vertically with the input.
- ✅ The input field has space around it (for a focus outline) when the label, input, and submit button are stacked.
Chrome screenshots
Before the patch, the submit button was slightly lower than the input at 1366 pixels wide and again at 782 pixels (though I did not experience the same at widths in between 782 and 1366).
| Before patch | With patch |
|---|---|
1366 pixels wide |
1366 pixels wide |
782 pixels wide |
782 pixels wide |
520 pixels wide |
520 pixels wide |
Firefox screenshots
| Before patch | With patch |
|---|---|
800 pixels wide |
800 pixels wide |
520 pixels wide |
520 pixels wide |
400 pixels wide |
400 pixels wide |
320 pixels wide |
320 pixels wide |
Environment
- WordPress: 7.1-alpha-62161-src
- Subdirectory: No
- PHP: 8.3.14
- Server: Apache/2.4.62 (Win64) PHP/8.3.14 mod_fcgid/2.3.10-dev
- Database: mysqli (Server: 9.1.0 / Client: mysqlnd 8.3.14)
- Browsers: Chrome 150.0.0.0, Firefox 152.0
- OS: Windows 11
- Theme: Twenty Twenty 3.1
- MU Plugins: None activated
- Plugins:
- Test Reports 1.3.0
This pull request makes a small CSS adjustment to the vertical alignment of buttons in the plugin favorites tab. The change ensures that buttons within
.plugin-install-tab-favoritesare aligned to the top instead of the default baseline.Ticket: https://core.trac.wordpress.org/ticket/65231