Plugin and Theme upload form is misaligned

[seedsca]

When uploading a plugin or theme file, the Install Now button is not correctly aligned and the button drops to the next line if filename is long. Changing the .wp-upload-form class to display: flex and max-width: max-content fixes this.

Also added right padding of 30px to input[type="file"]

The following CSS fixes the issue when added to a browser's dev tools.

.upload-plugin .wp-upload-form, .upload-theme .wp-upload-form {
		/* max-width: 380px; */
		max-width: max-content;
		display: flex;
}

.wp-admin input[type="file"] {
		/* padding: 3px 0; */
		padding: 3px 30px 3px 0;
}

I couldn't find where to change the CSS since it's being created from a load-styles.php file... Happy to create a pull request if anybody would give me some guidance on where the CSS is to be found :)

[seedsca]

Install Now button misaligned

[seedsca]

Install Now button dropping to next line because of long filename

[seedsca]

Install Now button alignment fixed and file name padded on right

[wpamitkumar]

used this patch to fix the long filename issue.

[mukesh27]

Hi @seedsca,

Welcome to WordPress Trac! Thanks for the ticket.

You can please refer - ​https://make.wordpress.org/core/handbook/tutorials/trac/submitting-a-patch/ how to submit a patch in WordPress Trac

[seedsca]

Fixes upload form formatting.

[audrasjb]

Hi there, thanks for the patches!

Unfortunately, max-content is not supported by IE11 and Edge browsers, @seedsca.
See another patch below for this issue.

[audrasjb]

Upload: Fix alignment issue on Theme/Plugin upload screen after WP 5.3.

[audrasjb]

48859.3.diff - Theme Upload Screen

[audrasjb]

48859.3.diff - Plugin Upload Screen

[audrasjb]

The last patch looks good on my side.

@SergeyBiryukov moving this one to 5.3.3 as it's a regression from branch 5.3 ;)

[seedsca]

@audrasjb Wouldn't the max-content be ignored by browsers that don't support it? There by leaving my patch to work pretty much as yours. But when the browsers do support it, they get to show the full width of the file name?

[audrasjb]

Moving all unfixed tickets from 5.3.3 to milestone 5.4, as there is no plan for a 5.3.3 maintenance release for now.

[davidbaumwald]

Based on https://core.trac.wordpress.org/ticket/48859#comment:6, marking this for feedback.

[audrasjb]

48859.3.diff still applies cleanly.
This first approach is the safer for now, and handles well the issue raised by this ticket. Another ticket could be opened later to make some improvements when max-content` property will have better browser’s support.

Marking this for commit.

[jorgefilipecosta]

In 47271:

Upload: Fix Plugin and Theme upload form are misaligned.

This commit makes sure that when uploading a plugin or theme file, the Install Now button is correctly aligned, and the button does not drops to the next line if filename is long.

Props seedsca, SergeyBiryukov, audrasjb.
Fixes #48859.

[afercia]

Hat tip to @passoniate: look like the addition of display: flex broke the upload form in the responsive view. The button is now almost entirely off-screen on small screens. New ticket incoming.

[afercia]

See #49951.

[afercia]

In 47750:

Upload: Improve file input and button alignment in plugin/theme upload form.

Resets flexbox on smaller screens. Improves vertical alignment on large screens.
Follow-up to [47599] and [47271].

Props mukesh27, DarkoG.
See #48859, #49914.
Fixes #49951.