From 37a2c8d540107cc3f6fe85d2074aa183c19ec548 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Thu, 8 Jun 2023 11:14:21 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@55896 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/css/media-views.css | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 27658f9dd5..5de184f2e3 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -371,7 +371,7 @@ } .media-sidebar h2, -.image-details h2:not(.media-attachments-filter-heading) { +.image-details .media-embed h2 { position: relative; font-weight: 600; text-transform: uppercase; @@ -906,8 +906,6 @@ .media-frame select.attachment-filters:last-of-type { margin-right: 0; - width: auto; - max-width: 100%; } /** @@ -2609,6 +2607,16 @@ right: 262px; } + .attachments-browser .media-toolbar { + height: 82px; + } + + .attachments-browser .attachments, + .attachments-browser .uploader-inline, + .media-frame-content .attachments-browser .attachments-wrapper { + top: 82px; + } + .media-sidebar .setting, .attachment-details .setting { margin: 6px 0; @@ -2819,15 +2827,6 @@ } @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; } @@ -2878,10 +2877,6 @@ right: 0; } - .attachments-browser .attachments-wrapper { - padding-top: 12px; - } - .image-details .media-frame-title { display: block; top: 0;