From c4e70e57427472241d27028ef82d6fddf719d868 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Mon, 8 Jun 2026 21:44:19 +0900 Subject: [PATCH 1/2] Media: Use the default 40px button height in the media modal. Remove the button overrides that forced a 32px min-height in the media modal and the edit attachment frame, letting buttons fall back to the default 40px height. Adjust the thumbnail max-height calculation to reserve 56px for the taller action buttons underneath, and clean up some stray trailing whitespace. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/wp-admin/css/media.css | 8 +------- src/wp-includes/css/media-views.css | 27 ++++++++++----------------- 2 files changed, 11 insertions(+), 24 deletions(-) diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index ae21bb77d3f82..189be9a4e5256 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -777,7 +777,7 @@ border color while dragging a file over the uploader drop area */ margin: 0 auto 16px; max-width: 100%; max-height: 90%; - max-height: calc( 100% - 42px ); /* leave space for actions underneath */ + max-height: calc( 100% - 56px ); /* leave space for actions underneath */ background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7); background-position: 0 0, 10px 10px; background-size: 20px 20px; @@ -791,12 +791,6 @@ border color while dragging a file over the uploader drop area */ text-align: center; } -.edit-attachment-frame .button { - min-height: 32px; - line-height: 2.30769231; /* 30px for 32px height with 13px font */ - padding: 0 12px; -} - .edit-attachment-frame .wp-media-wrapper { margin-bottom: 12px; } diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index eda326751c2f3..e0aa1b8637104 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -25,7 +25,7 @@ .media-modal label { font-size: 13px; -} +} .media-modal .legend-inline { position: absolute; @@ -272,13 +272,6 @@ -webkit-font-smoothing: subpixel-antialiased; } -.media-modal-content .button, -.media-modal-content .button.button-large { - min-height: 32px; - line-height: 2.30769231; /* 30px for 32px height with 13px font */ - padding: 0 12px; -} - .media-toolbar input[type="text"], .media-toolbar input[type="search"], .media-toolbar select { @@ -348,21 +341,21 @@ align-items: end; } -label[for="media-attachment-filters"] { - grid-area: 1 / 1 / 2 / 2; +label[for="media-attachment-filters"] { + grid-area: 1 / 1 / 2 / 2; } -select#media-attachment-filters { - grid-area: 2 / 1 / 3 / 2; +select#media-attachment-filters { + grid-area: 2 / 1 / 3 / 2; } -label[for="media-attachment-date-filters"] { - grid-area: 1 / 2 / 2 / 3; +label[for="media-attachment-date-filters"] { + grid-area: 1 / 2 / 2 / 3; } -select#media-attachment-date-filters { - grid-area: 2 / 2 / 3 / 3; -} +select#media-attachment-date-filters { + grid-area: 2 / 2 / 3 / 3; +} .media-toolbar-primary > .media-button, .media-toolbar-primary > .media-button-group { From 2cc99d0296744525e6cb5db574ebb2949cae0dd2 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Mon, 8 Jun 2026 21:57:05 +0900 Subject: [PATCH 2/2] Media: Reduce the media frame toolbar button margins to 10px. Lower the top and bottom margins of the primary toolbar buttons from 14px to 10px to keep the toolbar height balanced now that the buttons use the taller default 40px height. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/wp-includes/css/media-views.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index e0aa1b8637104..bea89bd1902ae 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -320,8 +320,8 @@ .media-frame-toolbar .media-toolbar-primary > .media-button, .media-frame-toolbar .media-toolbar-primary > .media-button-group { - margin-top: 14px; - margin-bottom: 14px; + margin-top: 10px; + margin-bottom: 10px; } .media-toolbar-primary {