Media: Fix button focus visibility in media uploads.

Following [r58279], the focus outline on the Edit button after uploading media was partially cut off. Adjust margin and padding to ensure the outline is visible, while also supporting appropriate word wrapping on long file names.

Props dilipbheda, karthikeya01, sabernhardt, narenin, zunaid321, Marius84, ankitkumarshah,  riddhidave, dilip2615, SirLouen, Presskopp, joedolson.
Fixes #63239.

git-svn-id: https://develop.svn.wordpress.org/trunk@60637 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-admin/async-upload.php

@@ -60,8 +60,8 @@
 					$title    = $post->post_title ? $post->post_title : wp_basename( $file );
 					?>
 					<div class="filename new">
-						<span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
-						<span class="media-list-subtitle"><?php echo esc_html( wp_basename( $file ) ); ?></span>
+						<span class="media-list-title word-wrap-break-word"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
+						<span class="media-list-subtitle word-wrap-break-word"><?php echo esc_html( wp_basename( $file ) ); ?></span>
 						<div class="attachment-tools">
 							<?php
 							if ( current_user_can( 'edit_post', $id ) ) {

src/wp-admin/css/media.css

@@ -167,9 +167,9 @@
 }
 
 .media-item .filename {
-	padding: 14px 0;
+	padding: 14px 2px;
 	overflow: hidden;
-	margin-left: 6px;
+	margin-left: 4px;
 }
 
 .media-item .pinkynail {