Changeset 62601

Timestamp:

06/30/2026 08:08:15 PM (3 months ago)

Author:

joedolson

Message:

Media: Fix filter toolbar spinner alignment.

The spinner that appeared during filtering was positioned beneath the fields, causing a scrollbar in the filter wrapper container. While only visible during scrolling on MacOS, it was persistently visible on Windows.

Fixes the alignment of the toolbar to appear with predictable alignment to the select fields without generating a scrollbar.

Follow up to [61757].

Reviewed by jorbin.
Merges [62480] to the 7.0 branch.

Props luismulinari, yogeshbhutkar, dhruvang21, r1k0, sabernhardt, wildworks, audrasjb, joedolson.
Fixes #65275. See #23562.

Location:

branches/7.0

Files:

• . (modified) (1 prop)
• src/wp-includes/css/media-views.css (modified) (8 diffs)

branches/7.0/src/wp-includes/css/media-views.css

@@ -334 +334 @@
         float: left;
         height: 100%;
+        position: relative;
         display: grid;
         grid-template-columns: repeat( 2, 1fr );
@@ -356 +357 @@
 select#media-attachment-date-filters {
         grid-area: 2 / 2 / 3 / 3;
+}
+
+.media-toolbar-secondary > .spinner {
+        position: absolute;
+        left: calc( 100% + 2px );
+        top: 50%;
+        margin: 0;
 }
 
@@ -1280 +1288 @@
 
 .attachments-browser .media-toolbar-primary {
-        max-width: 33%;
+        max-width: calc( 33% - 20px );
 }
 
@@ -1812 +1820 @@
         float: none;
         vertical-align: middle;
-}
-
-.media-modal .media-toolbar .spinner {
-        float: none;
-        vertical-align: bottom;
-        margin: 0 0 5px 5px;
 }
 
@@ -2829 +2831 @@
         }
 
+        .media-frame .media-toolbar-secondary .spinner {
+                top: calc( 50% - 8px );
+        }
+
         .media-modal .attachments-browser .media-toolbar .attachment-filters {
                 height: auto;
@@ -2849 +2855 @@
                 line-height: 2.3755; /* 38px */
         }
-
-        .media-modal .media-toolbar .spinner {
-                margin-bottom: 10px;
-        }
 }
 
@@ -2862 +2864 @@
         .media-frame-toolbar .media-toolbar {
                 bottom: -60px;
+        }
+
+        .media-frame .media-toolbar-secondary .spinner {
+                top: 0;
         }
 
@@ -2888 +2894 @@
                 bottom: 0;
                 margin: auto;
-                left: 0;
+                left: calc( 100% + 2px );
                 right: 0;
                 z-index: 9;