New media: Long file names overflow container

[johnbillion]

As per description.

[Nasarullahmari]

Replying to johnbillion:

As per description.

Its nice hear about you,i am new here in this disscussions,
hope we good interaction in future wd eachother.

Many thnkx.

[koopersmith]

Ah. This is due to removing the overflow: hidden; on the attachment view.

[nacin]

Should we additionally break-word this?

[miqrogroove]

Does break-word actually work? I tried using it recently to no avail.

[GregLone]

Hello.

includes/css/media-views.css - line 561:

.attachment .filename {
	/*...*/
	overflow: hidden;
	text-overflow: ellipsis;
}

This works, but imho this is not the best thing to do because we can see only 10 characters at best. I think this is a better way:

.attachment .filename {
	/*...*/
	overflow: hidden;
	word-wrap: break-word;
	max-height: 99px;
}

This way we can see longer file names. (the max-height is for veeeeeery long file names)

[koopersmith]

Patch provides better handling for long filenames (no overflow, break word, fit within container, etc).

[koopersmith]

Replying to GregLone:

Hello.

Hi, GregLone, and welcome! In the future, instead of providing specific code changes in a comment, please ​create a patch. Patches make it much easier for other developers to apply and test your changes consistently.

I've converted some of your suggestions into a patch (with improvements to the max-height section, as the size of the grid is dynamic).

[nacin]

What is left here? Basic testing across all the browsers down to IE8 or so?

[koopersmith]

Firefox has a relatively minor sad.

[koopersmith]

Fixes titles in Chrome, Firefox, Safari, Opera, and IE.

[ryan]

In 22870:

Fix overflow of long filenames in the media modal.

Props koopersmith, GregLone
fixes #22554