Media: Improve the appearance of image editor on small and medium screens.

This prevents the main area of Edit Media screen from being pushed down too far.

Props sabernhardt, afercia, fierevere, sathyapulse, mikeschroder, johnbillion.
Merges [47418] to the 5.3 branch.
Fixes #48780. See #47136.
Built from https://develop.svn.wordpress.org/branches/5.3@47419


git-svn-id: http://core.svn.wordpress.org/branches/5.3@47206 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.css

@@ -1387,6 +1387,40 @@ table.links-table {
 	}
 }
 
+/* one column on the attachment editor screen */
+@media only screen and (max-width: 1200px) {
+	.post-type-attachment #poststuff {
+		min-width: 0;
+	}
+
+	.post-type-attachment #wpbody-content #poststuff #post-body {
+		margin: 0;
+	}
+
+	.post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 {
+		margin-left: 0;
+		width: 100%;
+	}
+
+	.post-type-attachment #poststuff #postbox-container-1 .empty-container,
+	.post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
+		border: 0 none;
+		height: 0;
+		min-height: 0;
+	}
+
+	.post-type-attachment #poststuff #post-body.columns-2 #side-sortables {
+		min-height: 0;
+		width: auto;
+	}
+
+	/* hide the radio buttons for column prefs */
+	.post-type-attachment .screen-layout,
+	.post-type-attachment .columns-prefs {
+		display: none;
+	}
+}
+
 /* one column on the post write/edit screen */
 @media only screen and (max-width: 850px) {
 	#poststuff {

wp-admin/css/edit.css

@@ -1387,6 +1387,40 @@ table.links-table {
 	}
 }
 
+/* one column on the attachment editor screen */
+@media only screen and (max-width: 1200px) {
+	.post-type-attachment #poststuff {
+		min-width: 0;
+	}
+
+	.post-type-attachment #wpbody-content #poststuff #post-body {
+		margin: 0;
+	}
+
+	.post-type-attachment #wpbody-content #post-body.columns-2 #postbox-container-1 {
+		margin-right: 0;
+		width: 100%;
+	}
+
+	.post-type-attachment #poststuff #postbox-container-1 .empty-container,
+	.post-type-attachment #poststuff #postbox-container-1 #side-sortables:empty {
+		border: 0 none;
+		height: 0;
+		min-height: 0;
+	}
+
+	.post-type-attachment #poststuff #post-body.columns-2 #side-sortables {
+		min-height: 0;
+		width: auto;
+	}
+
+	/* hide the radio buttons for column prefs */
+	.post-type-attachment .screen-layout,
+	.post-type-attachment .columns-prefs {
+		display: none;
+	}
+}
+
 /* one column on the post write/edit screen */
 @media only screen and (max-width: 850px) {
 	#poststuff {

wp-admin/css/media-rtl.css

@@ -852,6 +852,8 @@ border color while dragging a file over the uploader drop area */
 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 	float: right;
 	padding: 3px 0 0 16px;
+	min-width: 400px;
+	max-width: calc( 100% - 266px );
 }
 
 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
@@ -1207,6 +1209,7 @@ audio, video {
 	.wp_attachment_holder .imgedit-wrap .imgedit-settings {
 		float: none;
 		width: auto;
+		max-width: none;
 	}
 }
 

wp-admin/css/media.css

@@ -852,6 +852,8 @@ border color while dragging a file over the uploader drop area */
 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
 	float: left;
 	padding: 3px 16px 0 0;
+	min-width: 400px;
+	max-width: calc( 100% - 266px );
 }
 
 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
@@ -1207,6 +1209,7 @@ audio, video {
 	.wp_attachment_holder .imgedit-wrap .imgedit-settings {
 		float: none;
 		width: auto;
+		max-width: none;
 	}
 }
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3.3-alpha-47417';
+$wp_version = '5.3.3-alpha-47419';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.