Changeset 62596

Timestamp:

06/30/2026 06:51:01 PM (6 weeks ago)

Author:

cbravobernal

Message:

Media: Use the default 40px button height in the media modal.

Buttons in the media modal and attachment detail modal defaulted to a 32px height via CSS overrides, while form elements such as input and select use the default 40px. Remove these overrides so buttons fall back to the default 40px height, resolving the size inconsistencies.

Reviewed by cbravobernal.
Merges [62587] to the 7.0 branch.

Props cbravobernal, huzaifaalmesbah, khokansardar, masteradhoc, muryam, noruzzaman, tusharaddweb, wildworks.
Fixes #65428.

Location:

branches/7.0

Files:

• . (modified) (1 prop)
• src/wp-admin/css/media.css (modified) (2 diffs)
• src/wp-includes/css/media-views.css (modified) (4 diffs)

branches/7.0/src/wp-admin/css/media.css

@@ -778 +778 @@
         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;
@@ -790 +790 @@
 .edit-attachment-frame .attachment-media-view .attachment-actions {
         text-align: center;
-}
-
-.edit-attachment-frame .button {
-        min-height: 32px;
-        line-height: 2.30769231; /* 30px for 32px height with 13px font */
-        padding: 0 12px;
 }
 

branches/7.0/src/wp-includes/css/media-views.css

@@ -26 +26 @@
 .media-modal label {
         font-size: 13px;
-}       
+}
 
 .media-modal .legend-inline {
@@ -273 +273 @@
 }
 
-.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"],
@@ -328 +321 @@
 .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;
 }
 
@@ -349 +342 @@
 }
 
-label[for="media-attachment-filters"] { 
-        grid-area: 1 / 1 / 2 / 2; 
-}
-
-select#media-attachment-filters { 
-        grid-area: 2 / 1 / 3 / 2; 
-}
-
-label[for="media-attachment-date-filters"] { 
-        grid-area: 1 / 2 / 2 / 3; 
-}
-
-select#media-attachment-date-filters { 
-        grid-area: 2 / 2 / 3 / 3; 
-} 
+label[for="media-attachment-filters"] {
+        grid-area: 1 / 1 / 2 / 2;
+}
+
+select#media-attachment-filters {
+        grid-area: 2 / 1 / 3 / 2;
+}
+
+label[for="media-attachment-date-filters"] {
+        grid-area: 1 / 2 / 2 / 3;
+}
+
+select#media-attachment-date-filters {
+        grid-area: 2 / 2 / 3 / 3;
+}
 
 .media-toolbar-primary > .media-button,