From 6ea302656563006e47cb5dde8b53ad61260f075a Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 21 Apr 2017 05:24:52 +0000
Subject: [PATCH] Customize: Increase width of controls pane on large monitors
 to give more room.

Props celloexpressions, timmydcrawford.
Fixes #32296.


git-svn-id: https://develop.svn.wordpress.org/trunk@40511 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css |  6 ++----
 src/wp-admin/css/themes.css             | 28 +++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index fbcfe64101..7aa2145e17 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1189,20 +1189,18 @@ p.customize-section-description {
 .customize-section-description-container + #customize-control-custom_css:last-child {
 	margin-left: -12px;
 	width: 299px;
+	width: -webkit-calc( 100% + 24px );
+	width: calc( 100% + 24px );
 	margin-bottom: -12px;
 }
 
 @media screen and ( max-width: 640px ) {
 	.customize-section-description-container + #customize-control-custom_css:last-child {
-		margin-left: 0;
 		margin-right: 0;
-		width: 100%;
 	}
 	.customize-section-description-container + #customize-control-custom_css:last-child textarea {
 		height: -webkit-calc( 100vh - 140px );
 		height: calc( 100vh - 140px );
-		width: 100%;
-		border: solid 1px #ddd;
 	}
 }
 
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 56fc43fc54..86fc133d73 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1332,7 +1332,9 @@ body.full-overlay-active {
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	position: fixed;
-	width: 300px;
+	min-width: 300px;
+	max-width: 600px;
+	width: 18%;
 	height: 100%;
 	top: 0;
 	bottom: 0;
@@ -1361,6 +1363,26 @@ body.full-overlay-active {
 	margin-left: -300px;
 }
 
+@media screen and (min-width: 1667px) {
+	.wp-full-overlay.expanded {
+		margin-left: 18%;
+	}
+
+	.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+		margin-left: -18%;
+	}
+}
+
+@media screen and (min-width: 3333px) {
+	.wp-full-overlay.expanded {
+		margin-left: 600px;
+	}
+
+	.wp-full-overlay.collapsed .wp-full-overlay-sidebar {
+		margin-left: -600px;
+	}
+}
+
 .wp-full-overlay-sidebar:after {
 	content: "";
 	display: block;
@@ -1615,7 +1637,9 @@ body.full-overlay-active {
 	position: fixed;
 	bottom: 0;
 	left: 0;
-	width: 299px;
+	min-width: 299px;
+	max-width: 599px;
+	width: 18%;
 	height: 45px;
 	border-top: 1px solid #ddd;
 	background: #eee;