Changeset 63029

Timestamp:

08/05/2026 01:19:30 PM (4 days ago)

Author:

joedolson

Message:

Media: Fix positioning of active spinner.

Two positioning issues: on desktop, the active spinner appeared off screen, generating a scrollbar in the media toolbar. In the attachment details modal, the spinner overlapped with the Saved confirmation.

On desktop, limit some positioning assignments to only apply with the media modal. In the attachment details, apply display: flex to prevent overlapping.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/12797

Props afercia, rcorrales, joedolson.
Fixes #65778.

File:

• trunk/src/wp-includes/css/media-views.css (modified) (5 diffs)

trunk/src/wp-includes/css/media-views.css

@@ -365 +365 @@
 }
 
-.media-toolbar-secondary > .spinner {
-        position: absolute;
-        left: calc( 100% + 2px );
+.media-modal .media-toolbar-secondary > .spinner {
+        position: absolute;
+        right: -30px;
         top: 50%;
         margin: 0;
@@ -1856 +1856 @@
         text-transform: none;
         font-weight: 400;
+        display: flex;
 }
 
@@ -2843 +2844 @@
         }
 
-        .media-frame .media-toolbar-secondary .spinner {
+        .media-modal .media-frame .media-toolbar-secondary .spinner {
                 top: calc( 50% - 8px );
         }
@@ -2878 +2879 @@
         }
 
-        .media-frame .media-toolbar-secondary .spinner {
+        .media-modal .media-frame .media-toolbar-secondary .spinner {
                 top: 0;
         }
@@ -2901 +2902 @@
         }
 
-        .media-frame .media-toolbar-secondary .spinner {
-                position: absolute;
-                top: 0;
+        .media-modal .media-frame .media-toolbar-secondary .spinner {
                 bottom: 0;
                 margin: auto;
-                left: calc( 100% + 2px );
-                right: 0;
                 z-index: 9;
         }