WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 7 weeks ago

#48859 closed enhancement (fixed)

Plugin and Theme upload form is misaligned

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

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 (8)

Screenshot_20191202_233855.png (25.2 KB) - added by seedsca 4 months ago.
Install Now button misaligned
Screenshot_20191202_234029.png (26.9 KB) - added by seedsca 4 months ago.
Install Now button dropping to next line because of long filename
Screenshot_20191202_234222.png (27.9 KB) - added by seedsca 4 months ago.
Install Now button alignment fixed and file name padded on right
48859.patch (352 bytes) - added by wpamitkumar 4 months ago.
used this patch to fix the long filename issue.
48859-2.diff (781 bytes) - added by seedsca 4 months ago.
Fixes upload form formatting.
48859.3.diff (578 bytes) - added by audrasjb 3 months ago.
Upload: Fix alignment issue on Theme/Plugin upload screen after WP 5.3.
Capture d’écran 2020-01-11 à 23.45.14.png (334.3 KB) - added by audrasjb 3 months ago.
48859.3.diff - Theme Upload Screen
Capture d’écran 2020-01-11 à 23.44.34.png (102.1 KB) - added by audrasjb 3 months ago.
48859.3.diff - Plugin Upload Screen

Download all attachments as: .zip

Change History (20)

@seedsca
4 months ago

Install Now button misaligned

@seedsca
4 months ago

Install Now button dropping to next line because of long filename

@seedsca
4 months ago

Install Now button alignment fixed and file name padded on right

@wpamitkumar
4 months ago

used this patch to fix the long filename issue.

#1 @mukesh27
4 months 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
4 months ago

Fixes upload form formatting.

#2 @SergeyBiryukov
4 months 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

#3 @audrasjb
3 months ago

  • Keywords needs-refresh added

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
3 months ago

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

@audrasjb
3 months ago

48859.3.diff - Theme Upload Screen

@audrasjb
3 months ago

48859.3.diff - Plugin Upload Screen

#4 @audrasjb
3 months ago

  • Keywords needs-refresh removed
  • Owner set to audrasjb
  • Status changed from new to accepted

#5 @audrasjb
3 months ago

  • Milestone changed from 5.4 to 5.3.3

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

#6 @seedsca
3 months ago

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

#7 @audrasjb
2 months ago

  • Milestone changed from 5.3.3 to 5.4

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.

This ticket was mentioned in Slack in #core by david.baumwald. View the logs.


7 weeks ago

#10 @davidbaumwald
7 weeks ago

  • Keywords dev-feedback added

#11 @audrasjb
7 weeks ago

  • Keywords commit added; dev-feedback removed

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.

#12 @jorgefilipecosta
7 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.