Changeset 62480

Timestamp:

06/10/2026 12:37:02 AM (6 weeks 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].

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

File:

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

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

@@ -341 +341 @@
         float: left;
         height: 100%;
+        position: relative;
         display: grid;
         grid-template-columns: repeat( 2, 1fr );
@@ -364 +365 @@
         grid-area: 2 / 2 / 3 / 3; 
 } 
+
+.media-toolbar-secondary > .spinner {
+        position: absolute;
+        left: calc( 100% + 2px );
+        top: 50%;
+        margin: 0;
+}
 
 .media-toolbar-primary > .media-button,
@@ -1287 +1295 @@
 
 .attachments-browser .media-toolbar-primary {
-        max-width: 33%;
+        max-width: calc( 33% - 20px );
 }
 
@@ -1819 +1827 @@
         float: none;
         vertical-align: middle;
-}
-
-.media-modal .media-toolbar .spinner {
-        float: none;
-        vertical-align: bottom;
-        margin: 0 0 5px 5px;
 }
 
@@ -2836 +2838 @@
         }
 
+        .media-frame .media-toolbar-secondary .spinner {
+                top: calc( 50% - 8px );
+        }
+
         .media-modal .attachments-browser .media-toolbar .attachment-filters {
                 height: auto;
@@ -2856 +2862 @@
                 line-height: 2.3755; /* 38px */
         }
-
-        .media-modal .media-toolbar .spinner {
-                margin-bottom: 10px;
-        }
 }
 
@@ -2869 +2871 @@
         .media-frame-toolbar .media-toolbar {
                 bottom: -60px;
+        }
+
+        .media-frame .media-toolbar-secondary .spinner {
+                top: 0;
         }
 
@@ -2895 +2901 @@
                 bottom: 0;
                 margin: auto;
-                left: 0;
+                left: calc( 100% + 2px );
                 right: 0;
                 z-index: 9;