Align selects in .form-table's within admin settings with their neighbour inputs for a more uniform feel

[garrett-eclipse]

Hello,

Reviewing the admin settings on several screens I feel they can be given a more uniform appearance if the selects matched the width of their neighbour .regular-text inputs. See attached screens.

Having these select a uniform width with the inputs provides a more consistent alignment.

Thoughts?
Thanks

[garrett-eclipse]

The shorter display name select doesn't align nicely with it's neighbour fields. On Profile.

[garrett-eclipse]

The Default Mail Category select not aligning with it's neighbour inputs in the Writing Settings

[SergeyBiryukov]

Related: #48420

[afercia]

Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.

[garrett-eclipse]

Replying to afercia:

Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.

Agreed, this width inconsistency has been present for quite some time I believe even pre-5.0 if I recall correctly.

[afercia]

This ticket was discussed during today's accessibility bug-scrub. We're not sure this is an accessibility issue. Instead, it was pointed out that in a form where elements are stacked vertically, the smaller width of the selects help to distinguish them. There was general consensus that this appears to be more a design / UI issue though.

[garrett-eclipse]

Thanks @afercia for the review. I think I was mainly flagging for accessibility as the select inputs change width depending on their contents which leads them to present differently depending and as such won't have a standard ending point so users with limited visibility whose cursor is in the right of the screen are better off going to the far left of the select as that will always be consistent where for the inputs they can go to the right side of it as they are consistent which means further to move the mouse.

Will leave for design feedback here and see if we can improve the aesthetic here through uniform conformity.

[afercia]

This ticket was discussed during today's accessibility bug-scrub: agreed to remove the accessibility focus as it doesn't appear to be an accessibility related issue.

[paaljoachim]

Widening the Display name publicly as drop down. To show what it would look like having the same width as the text fields surrounding it.

[paaljoachim]

Widening the "Default Mail Category" drop down. To show what it would look like having the same width as the text fields above it.

[paaljoachim]

It does look better having the drop down the same width as the text fields.

[joyously]

Design-wise, I think it's better to have variation than have them all the same.
Does the width apply the same on mobile?

[paaljoachim]

On one side we can say it creates consistency with having them the same width.
On the other side as you are saying Joy it creates variation. The drop downs stand out because of the difference in width. I have not checked mobile.

[robinwpdeveloper]

I think input/select filed width consistency is good to have. All fields with the same width would look better from my point of view.