WordPress.org

Make WordPress Core

Opened 9 days ago

Last modified 9 days ago

#48859 new enhancement

Plugin and Theme upload form is misaligned

Reported by: seedsca Owned by:
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Upload Keywords: has-patch has-screenshots
Focuses: ui, css, administration Cc:
PR Number:

Description

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

Attachments (5)

Screenshot_20191202_233855.png (25.2 KB) - added by seedsca 9 days ago.
Install Now button misaligned
Screenshot_20191202_234029.png (26.9 KB) - added by seedsca 9 days ago.
Install Now button dropping to next line because of long filename
Screenshot_20191202_234222.png (27.9 KB) - added by seedsca 9 days ago.
Install Now button alignment fixed and file name padded on right
48859.patch (352 bytes) - added by wpamitkumar 9 days ago.
used this patch to fix the long filename issue.
48859-2.diff (781 bytes) - added by seedsca 9 days ago.
Fixes upload form formatting.

Download all attachments as: .zip

Change History (7)

@seedsca
9 days ago

Install Now button misaligned

@seedsca
9 days ago

Install Now button dropping to next line because of long filename

@seedsca
9 days ago

Install Now button alignment fixed and file name padded on right

@wpamitkumar
9 days ago

used this patch to fix the long filename issue.

#1 @mukesh27
9 days ago

  • Keywords has-patch has-screenshots added
  • Type changed from defect (bug) to enhancement

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
9 days ago

Fixes upload form formatting.

#2 @SergeyBiryukov
9 days ago

  • Milestone changed from Awaiting Review to 5.4
  • Summary changed from Plugin and Theme upload form is miss aligned to Plugin and Theme upload form is misaligned
Note: See TracTickets for help on using tickets.