WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 4 months ago

#23003 closed defect (bug) (fixed)

Long filename breaks styling in media modal

Reported by: pavelevap Owned by: johnbillion
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: has-patch
Focuses: ui Cc:

Description

Long filename in media modal breaks styling of right sidebar. Long filename is displayed bellow thumbnail and longer labels bellow are moved to separate line.

See attached picture.

Attachments (4)

Long_filename.jpg (29.3 KB) - added by pavelevap 2 years ago.
Screen Shot 2014-06-08 at 3.52.05 PM.png (30.7 KB) - added by ramiabraham 9 months ago.
Screenshot of newly-added break-word and width setting
media-views.diff (407 bytes) - added by ramiabraham 9 months ago.
add break-word to .name class, set max-width for data-setting="alt"
media-views--rev.diff (387 bytes) - added by ramiabraham 9 months ago.
Removes the [data-setting="alt"] attribute.

Download all attachments as: .zip

Change History (13)

@pavelevap2 years ago

comment:1 @helen2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

I believe this is all intentional.

comment:2 @pavelevap2 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

I do not think so. I probably described it a little messy. Yes, filename is bellow thumbnail (no problem), but why "Alt Text" field is bellow Alt Text label (localized) when it works well if filename is shorter?

comment:3 @SergeyBiryukov2 years ago

  • Milestone set to Awaiting Review

The image on the right has smaller width, probably due to a scroll bar not shown in the screenshot.

Wrapping the text in the left column would probably look better than shifting the inputs down.

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

comment:4 @alexvorn22 years ago

I think this is by design

comment:5 @ericlewis9 months ago

  • Focuses ui added
  • Keywords needs-patch added

@ramiabraham9 months ago

Screenshot of newly-added break-word and width setting

@ramiabraham9 months ago

add break-word to .name class, set max-width for data-setting="alt"

comment:6 @ramiabraham9 months ago

  • Keywords has-patch added; needs-patch removed

Added word-wrap: break-word to
.media-sidebar .setting .name and specified a max-width for .setting[data-setting="alt"] .name

The min-width: 30%; is retained for .media-sidebar .setting .name, as a flexible width is needed for some elements.


comment:7 @ramiabraham9 months ago

Actually, the span class .name is not present in .media-sidebar .setting when there's also an input[type="checkbox"] (as a sibling of the span), so the [data-setting="alt"] attribute can be removed, which will allow the word-wrap to affect all span.name classes within .media-sidebar .setting.

@ramiabraham9 months ago

Removes the [data-setting="alt"] attribute.

comment:8 @wonderboymusic6 months ago

  • Milestone changed from Awaiting Review to 4.1

comment:9 @johnbillion4 months ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from reopened to closed

In 30359:

Correctly wrap the text in long input labels in the media manager.

Fixes #23003
Props ramiabraham

Note: See TracTickets for help on using tickets.