Add Plugins > Favourites: Input field and Submit button are not properly horizontally aligned

[bayejid00]

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

​https://prnt.sc/zDQinNEC_7-V

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-favorites are aligned to the top instead of the default baseline.

Before	After

| | |

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-username class 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

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.

[sabernhardt]

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.

[tusharaddweb]

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

[joedolson]

I don't really think that this strictly belongs in the 7.0.1 milestone, since it existed in 6.9. However, it's definitely a minor change that has a close relationship to other fixes being applied for 7.0.1, so in my opinion it's reasonable to include.

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.

Thanks @sabernhardt, I have made those changes and verified it. Please let me know if any feedback.

[joedolson]

In 62697:

Plugins: Fix alignment of Favorites input and submit.

Fix the alignment of the label, input field, and Submit button for getting your user favorites in the plugins screen. Modernizes layout to use flex layout and improves small viewports.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/11806

Props bayejid00, deepakprajapati, shreyasikhar26, tusharaddweb, joedolson, sabernhardt.
Fixes #65231.