Attachment Details - Edit: uneven height between input field and "Scale" button

[eliorivero]

Steps to reproduce:

1. go to Media
2. click an image to open its Attachment Details view
3. click Edit Image button below the image

In the SCALE IMAGE section, the height of the dimension fields and the Scale button don't match.

After applying the attached patch, they look even

This change doesn't affect the height in small screen size:

[eliorivero]

Removes uneven height applied to dimension fields in Scale Image area.

[joemcgill]

Hi @eliorivero,

Good catch, and thanks for contributing. Your patch seems to work well for the image edit view inside the media modal, but misses the same issue on the /wp-admin/post.php?post={{post_id}}&action=edit screen. The easiest way to get to that screen is from the list view in the media library.

Looks like by removing the styles in your patch, the padding and line-height for these inputs fall back to the defaults set for any input inside a .edit-attachment-frame (see relevant lines of code), which explains why it's only being applied in the media modal.

Perhaps we should apply the same default padding and line-height being applied to .edit-attachment-frame input and .edit-attachment-frame textarea to .imgedit-settings input and .imgedit-settings textarea. What do you think?

[eliorivero]

Even height in Edit Media screen and Edit Image view of Media dialog

[eliorivero]

Hi @joemcgill,

thanks for the review. There's a new patch attached that covers both screens. I didn't use the line-height because it made the field 1 px taller and needed to tweak the vertical padding to make it look right

so I just added a tweaked padding plus restored the font size again because otherwise the font was smaller.

Cheers!

[joemcgill]

Thanks @eliorivero. 37806.1.patch​ looks better to me. Just for kicks, 37806.diff​ removes the padding and font-size rules and allows these to take on the default sizes that apply to all other text inputs in the media modal. However, if we're intentionally bumping up the font size on those particular inputs then your last patch is the best option.

Would be good to get some feedback from some our our resident designers here, so I'll reach out for a second opinion.

[karmatosed]

My concern here is there is a historical reason for the font-size rules. @hugobaeta do you know of any reason - adding you here as you may. If there is no reason and device testing is solid, I'm totally keen we get rid of extra things and go with the cleaner patch.

Visually I am also very keen this gets in, it's awesome tidying up - thanks @eliorivero and @joemcgill for this.

[FolioVision]

This is a splendid improvement. Much tidier, Elio and Joe.

Nice work.

[joemcgill]

Let's go ahead and go with 37806.1.patch​ and leave the font size in these inputs alone for now.

[joemcgill]

In 38626:

Media: Align input and button heights in attachment details.

This tweaks the padding of the text inputs in image settings boxes on
image edit screens to match the height of the scale button.

Props eliorivero.
Fixes #37806.