From 2158edc28f88345e78b982867b825a0c6a94de1b Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Sun, 13 Nov 2016 18:59:21 +0000
Subject: [PATCH] Customize: Prevent the "Hide Controls" button label from
 overrunning the device preview buttons.

Adds translation context for "Hide Controls" strings so translators can supply shorter strings where space is constrained. Adds styles to fade-out long the "Hide Controls" label where it would run into the device preview buttons.

Props westonruter, ocean90.
Fixes #38762.


git-svn-id: https://develop.svn.wordpress.org/trunk@39214 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/themes.css       | 4 ++++
 src/wp-admin/customize.php        | 4 ++--
 src/wp-includes/script-loader.php | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 5019c1cd18..9b5421dc59 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1521,6 +1521,7 @@ body.full-overlay-active {
 	box-shadow: none !important;
 	-webkit-border-radius: 0 !important;
 	border-radius: 0 !important;
+	z-index: -1; /* Below device buttons */
 }
 
 .wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
@@ -1624,6 +1625,9 @@ body.full-overlay-active {
 
 .wp-full-overlay-footer .devices {
 	float: right;
+	background: #eee;
+	-webkit-box-shadow: -20px 0 10px -5px #eee;
+	box-shadow: -20px 0 10px -5px #eee;
 }
 
 .wp-full-overlay-footer .devices button {
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 0a1f9b3efa..c90f1143a3 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -191,9 +191,9 @@ do_action( 'customize_controls_print_scripts' );
 				<?php endforeach; ?>
 			</div>
 			<?php endif; ?>
-			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Hide Controls' ); ?>">
+			<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php echo esc_attr( _x( 'Hide Controls', 'label for hide controls button without length constraints' ) ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
-				<span class="collapse-sidebar-label"><?php _e( 'Hide Controls' ); ?></span>
+				<span class="collapse-sidebar-label"><?php _ex( 'Hide Controls', 'short (~12 characters) label for hide controls button' ); ?></span>
 			</button>
 		</div>
 	</form>
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index c64920af9b..fadfb28870 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -467,8 +467,8 @@ function wp_default_scripts( &$scripts ) {
 		'notAllowed'         => __( 'Sorry, you are not allowed to customize this site.' ),
 		'previewIframeTitle' => __( 'Site Preview' ),
 		'loginIframeTitle'   => __( 'Session expired' ),
-		'collapseSidebar'    => __( 'Hide Controls' ),
-		'expandSidebar'      => __( 'Show Controls' ),
+		'collapseSidebar'    => _x( 'Hide Controls', 'label for hide controls button without length constraints' ),
+		'expandSidebar'      => _x( 'Show Controls', 'label for hide controls button without length constraints' ),
 		'untitledBlogName'   => __( '(Untitled)' ),
 		// Used for overriding the file types allowed in plupload.
 		'allowedFiles'       => __( 'Allowed Files' ),