Fix overflow of long filenames in the media modal.

Props koopersmith, GregLone
fixes #22554


git-svn-id: http://core.svn.wordpress.org/trunk@22870 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views.css

@@ -569,11 +569,18 @@ a.media-modal-close {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 5px 10px;
+	overflow: hidden;
+	max-height: 100%;
+
+	word-wrap: break-word;
 	text-align: center;
 	font-weight: bold;
 	background: rgba( 255, 255, 255, 0.8 );
-	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 );
+	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
+}
+
+.attachment .filename div {
+	padding: 5px 10px;
 }
 
 .attachment-preview .thumbnail {

wp-includes/media.php

@@ -1600,7 +1600,9 @@ function wp_print_media_templates( $attachment ) {
 				</div>
 			<# } else { #>
 				<img src="{{ data.icon }}" class="icon" draggable="false" />
-				<div class="filename">{{ data.filename }}</div>
+				<div class="filename">
+					<div>{{ data.filename }}</div>
+				</div>
 			<# } #>
 
 			<# if ( data.buttons.close ) { #>