Opened 4 weeks ago
Last modified 4 days ago
#65231 accepted defect (bug)
Add Plugins > Favourites: Input field and Submit button are not properly horizontally aligned
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 7.0.1 | Priority: | normal |
| Severity: | minor | Version: | |
| Component: | Plugins | Keywords: | has-patch |
| Focuses: | ui, css, administration | Cc: |
Description
Description
On the Add Plugins > Favourites tab, the "Your WordPress.org username:" input field and the "Get Favorites" submit button are not properly horizontally aligned with each other. The button appears to be vertically offset relative to the input field, resulting in an inconsistent and visually unpolished UI.
Environment
WP Version: 7.0-RC3
PHP Version: 8.3
Steps to Reproduce
Navigate to wp-admin > Plugins > Add New.
Click on the "Favourites" tab.
Observe the "Your WordPress.org username:" input field and the "Get Favorites" button.
Expected Result
The input field and the "Get Favorites" button should be perfectly aligned on the same horizontal baseline.
Actual Result
The "Get Favorites" button is not vertically centered with the input field, causing a misalignment in the layout.
Screenshot
Change History (7)
This ticket was mentioned in PR #11817 on WordPress/wordpress-develop by @shreyasikhar26.
4 weeks ago
#1
- Keywords has-patch added
This ticket was mentioned in PR #11818 on WordPress/wordpress-develop by @deepakprajapati.
4 weeks ago
#2
Trac ticket: https://core.trac.wordpress.org/ticket/65231
## What?
Fixes the alignment of the username input and “Get Favorites” button on the Add Plugins > Favorites screen.
## Why?
The plugin favorites form used plain paragraph markup, so the input and submit button were not vertically aligned.
## How?
- Added the existing
favorites-usernameclass to the plugin favorites form row. - Reused the existing flex alignment styles already used by the theme favorites form.
## Testing
- Confirmed the input field and “Get Favorites” button align correctly on Plugins > Add New > Favorites.
## Use of AI Tools
None
## Screenshot
| Before | After |
|---|---|
| | |
@deepakprajapati commented on PR #11818:
4 weeks ago
#3
Closing this PR in favor of #11817 . I did not see the existing fix before opening this PR, and the issue is already addressed there.
#4
@
4 weeks ago
- Component changed from General to Plugins
- Focuses css administration added
- Milestone changed from Awaiting Review to 7.0.1
- Severity changed from normal to minor
- Version trunk deleted
The misalignment already occurred in 6.9 on small screens up to 782 pixels wide. With 7.0, the submit button can be slightly lower than the search text field in Chrome on larger screens when the paragraph height is 40.5 pixels (it seems to happen when the top paragraph is either one or three lines, but not two or four lines). With Firefox and Windows 11, I only experience the misalignment at narrower screen widths.
PR 11817 can fix the issue, but I do not think that buttons.css in wp-includes is the best place for a ruleset that applies to only one administration screen. I probably would add it to either list-tables.css or common.css in wp-admin, and the specificity could be reduced.
I would have suggested using flex, similar to PR 11818, and I would like to consider both options.
#5
@
4 weeks ago
I tested this issue on WordPress 7.0-RC3 and I was able to reproduce the misalignment.
Refer Below Images :
Before Patch :
https://postimg.cc/9rGhF7k5
After-Patch :
https://postimg.cc/569h1RLG
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.|
|
|