Ticket #48378: 48378.3.diff

src/js/media/views/settings/attachment-display.js

@@ -83 +83 @@
                 }
 
                 $input.closest( '.setting' ).removeClass( 'hidden' );
+                if ( $input.length ) {
+                        $input[0].scrollIntoView();
+                }
         }
 });
 

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

@@ -307 +307 @@
 
 .media-frame-toolbar .media-toolbar {
         top: auto;
-        bottom: -45px;
+        bottom: -47px;
         height: auto;
         overflow: visible;
         border-top: 1px solid #ddd;
@@ -346 +346 @@
         right: 0;
         bottom: 0;
         width: 267px;
-        padding: 0 16px 24px;
+        padding: 0 16px;
         z-index: 75;
         background: #f3f3f3;
         border-left: 1px solid #ddd;
@@ -354 +354 @@
         -webkit-overflow-scrolling: touch;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-sidebar::after {
+        content: "";
+        display: flex;
+        clear: both;
+        height: 24px;
+}
+
 .hide-toolbar .media-sidebar {
         bottom: 0;
 }
@@ -746 +757 @@
         position: absolute;
         left: 200px;
         right: 0;
-        bottom: 0;
-        height: 60px;
         z-index: 100;
         bottom: 60px;
         height: auto;
@@ -1850 +1859 @@
 }
 
 .media-modal .imgedit-wrap .imgedit-panel-content {
-        padding: 16px;
+        padding: 16px 16px 0 16px;
         position: absolute;
         top: 0;
         right: 282px;
@@ -1859 +1868 @@
         overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-submit {
+        margin-bottom: 16px;
+}
+
 .media-modal .imgedit-wrap .imgedit-settings {
         background: #f3f3f3;
         border-left: 1px solid #ddd;
-        padding: 20px 16px 16px;
+        padding: 20px 16px 0;
         position: absolute;
         top: 0;
         right: 0;
@@ -1871 +1888 @@
         overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.media-modal .imgedit-wrap .imgedit-save-target {
+        margin: 8px 0 24px;
+}
+
 .media-modal .imgedit-group {
         background: none;
         border: none;
@@ -2001 +2026 @@
         left: 0;
         right: 0;
         bottom: 0;
-        padding: 0 16px 32px;
+        padding: 0 16px;
         overflow: auto;
 }
 
+/*
+ * Implementation of bottom padding in overflow content differs across browsers.
+ * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
+ */
+.embed-link-settings::after,
+.embed-media-settings::after {
+        content: "";
+        display: flex;
+        clear: both;
+        height: 24px;
+}
+
 .media-embed .embed-link-settings {
         /* avoid Firefox to give focus to the embed preview container parent */
         overflow: visible;
@@ -2049 +2086 @@
         padding: 0;
 }
 
+.image-details .embed-media-settings::after {
+        content: none;
+}
+
 .image-details .embed-media-settings,
 .image-details .embed-media-settings div {
         box-sizing: border-box;
@@ -2669 +2710 @@
         }
 
         .media-frame-toolbar .media-toolbar {
-                bottom: -48px;
+                bottom: -54px;
         }
 }