Long filename breaks styling in media modal

[pavelevap]

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.

[helen]

I believe this is all intentional.

[pavelevap]

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?

[SergeyBiryukov]

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.

[alexvorn2]

I think this is by design

[ramiabraham]

Screenshot of newly-added break-word and width setting

[ramiabraham]

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

[ramiabraham]

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.

[ramiabraham]

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.

[ramiabraham]

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

[johnbillion]

In 30359:

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

Fixes #23003
Props ramiabraham