From c29cab4491f0cf01c921a78be962de49b2ffe728 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Fri, 12 May 2017 17:50:00 +0000
Subject: [PATCH] Customize: Make the media control buttons natural-width.

Natural-width buttons are better for translations, and don't feel as
overpowering as the half-width (and full-width) buttons.

Props melchoyce, timmydcrawford, afercia.
Fixes #40220.


git-svn-id: https://develop.svn.wordpress.org/trunk@40653 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css | 26 +++++++++----------------
 src/wp-admin/css/widgets.css            | 10 ++++++----
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index d033b892c9..51ec281916 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -710,7 +710,9 @@ p.customize-section-description {
 	padding-top: 7px;
 }
 
-.customize-control .thumbnail-image {
+.customize-control .thumbnail-image,
+.customize-control-header .current,
+.customize-control .wp-media-wrapper.wp-video {
 	line-height: 0;
 }
 
@@ -932,12 +934,8 @@ p.customize-section-description {
 
 /* Media controls */
 
-.customize-control .attachment-media-view .actions {
-	margin-top: 8px;
-}
-
-.customize-control-header .current {
-	margin-bottom: 8px;
+.customize-control .actions .button {
+	margin-top: 12px;
 }
 
 .customize-control-header .actions,
@@ -965,9 +963,9 @@ p.customize-section-description {
 .customize-control .attachment-media-view .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
-	white-space: normal;
-	width: 48%;
+	width: auto;
 	height: auto;
+	white-space: normal;
 }
 
 .customize-control .attachment-media-view .thumbnail,
@@ -1013,7 +1011,7 @@ p.customize-section-description {
 .customize-control-header .header-view {
 	position: relative;
 	width: 100%;
-	margin-bottom: 5px;
+	margin-bottom: 12px;
 }
 
 .customize-control-header .header-view:last-child {
@@ -1137,13 +1135,7 @@ p.customize-section-description {
 .customize-control .attachment-media-view .remove-button,
 .customize-control .attachment-media-view .default-button,
 .customize-control-header .remove {
-	float: left;
-	margin-right: 3px;
-}
-
-.customize-control .attachment-media-view .upload-button,
-.customize-control-header .new {
-	float: right;
+	margin-right: 8px;
 }
 
 /* Background position control */
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index 3c7a2efbb7..d06fc29f70 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -68,16 +68,18 @@
 
 .media-widget-buttons {
 	text-align: left;
-	margin-bottom: 10px;
+	margin-top: 0;
 }
 
 .media-widget-control .media-widget-buttons .button {
-	margin-left: 8px;
 	width: auto;
+	height: auto;
+	margin-top: 12px;
+	white-space: normal;
 }
-.media-widget-control:not(.selected) .media-widget-buttons .button,
+
 .media-widget-buttons .button:first-child {
-	margin-left: 0;
+	margin-right: 8px;
 }
 
 .media-widget-control .placeholder {