Changeset 56026

Timestamp:

06/25/2023 09:11:51 PM (3 years ago)

Author:

joedolson

Message:

Administration: Fix visual regression in media search input.

Follow up to [r56023]. Improve handling of breakpoint between 782 and 1000px for media grid view & repair styles for media modal search input.

Props kebbet, joedolson.
Fixes #57949.

Location:

trunk/src

Files:

• wp-admin/css/media.css (modified) (3 diffs)
• wp-includes/css/media-views.css (modified) (2 diffs)

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

@@ -582 +582 @@
 .media-frame.mode-grid .search {
         margin-top: 0;
+}
+
+.media-frame-content .media-search-input-label {
+        margin: 0 .2em 0 0;
+        vertical-align: baseline;
+}
+
+.media-frame.mode-grid .media-search-input-label {
+        position: static;
+        margin: 0 .5em 0 0;
 }
 
@@ -1335 +1345 @@
  * Media queries for media grid.
  */
-
 @media only screen and (max-width: 1120px) {
         /* override for media-views.css */
@@ -1341 +1350 @@
                 max-width: 100%;
         }
+}
+
+@media only screen and (max-width: 1000px) {
+        /* override for forms.css */
+        .wp-filter p.search-box {
+                float: none;
+                width: 100%;
+                margin-bottom: 20px;
+                display: flex;
+        }
+
 }
 

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

@@ -282 +282 @@
 }
 
-.media-modal-content .attachments-browser .search {
-        width: 100%;
-}
-
 /* higher specificity */
 .wp-core-ui .media-modal-icon {
@@ -925 +921 @@
 }
 
+.media-modal .media-frame .media-search-input-label {
+        position: absolute;
+        left: 0;
+        top: 10px;
+        margin: 0;
+        line-height: 1;
+}
+
 /**
  * Attachments