Uploaded Media Delete Confirm Buttons Not Aligned

[JarretC]

After uploading the media but before saving your changes if you choose to delete the file the Continue/Cancel buttons end up on a different line.

Just a small patch that adds a paragraph element around the buttons to add them onto the next line. This also spaces the Cancel button a little bit further away from the filename so that it isn't so close.

[linuxologos]

[12543]

[DrewAPicture]

Looks like an improvement. +1

[jane]

I'm down.

[SergeyBiryukov]

With delete-confirm.patch

[SergeyBiryukov]

With 19785.patch

[SergeyBiryukov]

One minor concern is that a <p> tag would take up a bit more space and mouse movement for short file names (see 19785.delete-confirm.png​).

19785.patch​ moves the buttons to the next line for long file names only (see 19785.after.png​).

[JarretC]

Replying to SergeyBiryukov:

One minor concern is that a <p> tag would take up a bit more space and mouse movement for short file names (see 19785.delete-confirm.png​).

19785.patch​ moves the buttons to the next line for long file names only (see 19785.after.png​).

True, I was just initially thinking that having it always under would provide a consistent place in the UI as it would never change, even though it is a minor change.

I agree with the spacing, was going to add a class to the <p> and shorten the space with CSS but was just wanting to get an initial response.

[nacin]

I would opt for a consistent location. Let's figure out the padding and commit this.

[JarretC]

Added in new patch with CSS class and CSS updates, put them in media-dev.css...not 100% sure if it is supposed to go there or not. If not, let me know!

​http://core.trac.wordpress.org/attachment/ticket/19785/delete-confirm-2.patch

[lancewillett]

Clean up patch to remove CSS, just add the block-level element

[aaroncampbell]

I think adding the paragraph tag around the text instead of the images make more sense.

[aaroncampbell]

Talked to Lance and decided that it did make more sense to put the paragraph tag around the text instead of the buttons. It has the same effect and it's more semantic. 19785.diff​ does just that.

[markjaquith]

In [20309]:

Wrap attachment delete link in <p> for semantics and alignment. props aaroncampbell, lancewillett. fixes #19785