Changeset 55896

Timestamp:

06/08/2023 11:14:21 AM (3 years ago)

Author:

joedolson

Message:

Media: Fix CSS layout issues in Replace media dialog.

Make focus outline fully visible at all media query breakpoints, prevent the date filter from becoming hidden, and match the heading styles to other screens.

Props sabernhardt, hareesh-pillai, alvitazwar052.
Fixes #54395.

File:

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

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

@@ -372 +372 @@
 
 .media-sidebar h2,
-.image-details h2:not(.media-attachments-filter-heading) {
+.image-details .media-embed h2 {
         position: relative;
         font-weight: 600;
@@ -907 +907 @@
 .media-frame select.attachment-filters:last-of-type {
         margin-right: 0;
-        width: auto;
-        max-width: 100%;
 }
 
@@ -2608 +2606 @@
         .attachments-browser.has-load-more .attachments-wrapper {
                 right: 262px;
+        }
+
+        .attachments-browser .media-toolbar {
+                height: 82px;
+        }
+
+        .attachments-browser .attachments,
+        .attachments-browser .uploader-inline,
+        .media-frame-content .attachments-browser .attachments-wrapper {
+                top: 82px;
         }
 
@@ -2820 +2828 @@
 
 @media screen and (max-width: 782px) {
-        .attachments-browser .media-toolbar {
-                height: 82px;
-        }
-
-        .attachments-browser .attachments,
-        .attachments-browser .uploader-inline {
-                top: 82px;
-        }
-
         .media-frame-toolbar .media-toolbar {
                 bottom: -54px;
@@ -2879 +2878 @@
         }
 
-        .attachments-browser .attachments-wrapper {
-                padding-top: 12px;
-        }
-
         .image-details .media-frame-title {
                 display: block;