From 7dd3e6edd980f6b9b68b82ddc6fd451af55eddaf Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Tue, 3 Mar 2020 17:19:55 +0000
Subject: [PATCH] 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.
Fixes #48780. See #47136.

git-svn-id: https://develop.svn.wordpress.org/trunk@47418 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/edit.css  | 34 ++++++++++++++++++++++++++++++++++
 src/wp-admin/css/media.css |  3 +++
 2 files changed, 37 insertions(+)

diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index fdb3f332ad..a789a4399d 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/wp-admin/css/edit.css
@@ -1428,6 +1428,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 {
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index ebbe94e642..3857baaf01 100644
--- a/src/wp-admin/css/media.css
+++ b/src/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 {
@@ -1211,6 +1213,7 @@ audio, video {
 	.wp_attachment_holder .imgedit-wrap .imgedit-settings {
 		float: none;
 		width: auto;
+		max-width: none;
 	}
 }