diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 711a618ca5c79..04a6ac6380a35 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -764,6 +764,7 @@ th.sorted a span { .media-toolbar.wp-filter .view-switch { margin: 0 12px 0 2px; + padding: 0; } .view-switch a { diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 09c69d83cbb41..c07eda3908e34 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -602,6 +602,7 @@ border color while dragging a file over the uploader drop area */ flex-wrap: wrap; align-items: center; gap: 8px; + padding: 0 !important; /* Override potential padding added by plugins. */ } .media-frame.mode-grid.mode-edit .media-toolbar-secondary > .select-mode-toggle-button { @@ -619,7 +620,7 @@ border color while dragging a file over the uploader drop area */ } .media-frame-content .media-search-input-label { - vertical-align: baseline; + margin-bottom: 4px; } .attachments-browser .media-toolbar-secondary > .media-button { diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 6748a50f00c57..6731b3f767bd3 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -297,12 +297,6 @@ * Toolbar */ .media-toolbar { - position: absolute; - top: 0; - left: 0; - right: 0; - z-index: 100; - height: 48px; padding: 0 16px; border: 0 solid #dcdcde; overflow: auto; @@ -310,7 +304,7 @@ .media-frame-toolbar .media-toolbar { top: auto; - bottom: -60px; + bottom: 0; height: auto; overflow: visible; border-top: 1px solid #dcdcde; @@ -330,16 +324,26 @@ } .media-toolbar-secondary { - float: left; height: 100%; + width: auto !important; /* override potential width added by plugins */ display: grid; grid-template-columns: repeat( 2, 1fr ); - grid-template-rows: repeat( 2, 1fr ); - grid-column-gap: 12px; - grid-row-gap: 0px; + /* grid-template-rows: repeat( 2, 1fr ); */ + grid-column-gap: 8px; + grid-row-gap: 8px; align-items: end; } +.media-frame .media-toolbar-secondary label { + margin-bottom: -4px; +} + +/* Reset styles from the FOlders plugin for testing purposes */ +.media-frame .media-toolbar-secondary select { + width: auto !important; + margin: 0 !important +} + label[for="media-attachment-filters"] { grid-area: 1 / 1 / 2 / 2; } @@ -787,7 +791,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { * Frame */ .media-frame { - overflow: hidden; + overflow: hidden !important; /* !important for debugging purposes to override overflow: inherit; from the Folder plugins. */ position: absolute; top: 0; left: 0; @@ -831,7 +835,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { height: auto; width: auto; margin: 0; - overflow: auto; + overflow: auto !important; /* !important for debugging purposes to override overflow: inherit; from the Folder plugins. */ background: #fff; border-top: 1px solid #dcdcde; } @@ -841,7 +845,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { left: 200px; right: 0; z-index: 100; - bottom: 60px; + bottom: 0; height: auto; } @@ -957,7 +961,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { min-height: 32px; line-height: 2.14285714; /* 30px for 32px height with 14px font */ padding: 0 24px 0 8px; - margin-right: 2%; + margin-right: 0; } .media-frame select.attachment-filters:last-of-type { @@ -1248,16 +1252,34 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { * Attachments Browser */ .media-frame .attachments-browser { - position: relative; - width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; height: 100%; - overflow: hidden; +} + +.attachments-wrapper { + position: relative; + flex: 1; + overflow-y: auto; + min-width: 100%; + background: lightcoral; /* temporary background color for debugging */ } .attachments-browser .media-toolbar { - right: 300px; background: #fff; padding: 12px 16px; + display: flex; + justify-content: space-between; + background: lightblue; /* temporary background color for debugging */ +} + +.media-modal .attachments-browser .media-toolbar { + position: sticky; + top: 0; + z-index: 100; + min-width: calc(100% - 300px); + box-sizing: border-box; } .attachments-browser.hide-sidebar .media-toolbar { @@ -1279,7 +1301,7 @@ select#media-attachment-filters ~ select#media-attachment-date-filters { .attachments-browser.has-load-more .attachments-wrapper, .attachments-browser .uploader-inline { position: absolute; - top: 72px; + top: 0; left: 0; right: 300px; bottom: 0;