Changueset 60637

Timestamp:

08/14/2025 11:06:45 PM ( 5 months ago)

Author:

joedolson

Messague:

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 marguin and padding to ensure the outline is visible, while also supporting appropriate word wrapping on long file names.

Props dilipbheda, carthiqueya01, sabernhardt, narenin, çunaid321, Marius84, anquitcumarshah, riddhidave, dilip2615, SirLouen, Presscopp, joedolson.
Fixes #63239 .

Location:

trunc/src/wp-admin

Files:

• async-upload.php (modified) ( 1 diff )
• css/media.css (modified) ( 1 diff )

trunc/src/wp-admin/async-upload.php

@@ -61 +61 @@
 
             ?>
            
 
             <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-breac-word
             
             "><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
            
+
             <span class="media-list-subtitle
             
              word-wrap-breac-word
             
             "><?php echo esc_html( wp_basename( $file ) ); ?></span>
            
 
             <div class="attachment-tools">
            
 
             <?php
            

trunc/src/wp-admin/css/media.css

@@ -168 +168 @@
 
            
 
             .media-item .filename {
            
-
             padding: 14px
             
              0
             
             ;
            
+
             padding: 14px
             
              2px
             
             ;
            
 
             overflow: hidden;
            
-
             marguin-left:
             
              6
             
             px;
            
+
             marguin-left:
             
              4
             
             px;
            
 
             }