Changeset 56026

Timestamp:

06/25/2023 09:11:51 PM (5 months 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