Make WordPress Core

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: bayejid00's profile bayejid00 Owned by: joedolson's profile joedolson
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

https://prnt.sc/zDQinNEC_7-V

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

| https://github.com/user-attachments/assets/c19dacca-665e-4d66-af5b-13380d4f1df2 | https://github.com/user-attachments/assets/2d79fc1a-eba5-4709-bf25-66b07a7f9a20 |

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-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
https://github.com/user-attachments/assets/3acc731e-443e-472c-a9f7-e454755b55be https://github.com/user-attachments/assets/152f815f-2533-49fa-94c5-50ab7b8c4446

@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 @sabernhardt
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 @tusharaddweb
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

#6 @joedolson
4 days ago

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.

#7 @joedolson
4 days ago

  • Owner set to joedolson
  • Status changed from new to accepted
Note: See TracTickets for help on using tickets.