From 812e2169398c8c34481f0d33f4e6434c96607cd7 Mon Sep 17 00:00:00 2001
From: TimVevida <timhavinga@vevida.com>
Date: Mon, 3 Jun 2019 12:06:38 +0200
Subject: [PATCH 1/2] Make the width of the input field flexible.

In other languages, the button 'Default' could be placed underneath the
input because the button text was longer. This commit makes sure the
input and button are always on the same line, using flexbox.
---
 .../alpha-color-picker/alpha-color-picker.css | 26 +++++--------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/customizer/alpha-color-picker/alpha-color-picker.css b/customizer/alpha-color-picker/alpha-color-picker.css
index 93313e7..0455cc6 100644
--- a/customizer/alpha-color-picker/alpha-color-picker.css
+++ b/customizer/alpha-color-picker/alpha-color-picker.css
@@ -11,17 +11,16 @@
 }
 
 .customize-control-alpha-color .wp-picker-open + .wp-picker-input-wrap {
-	width: 100%;
+	display: flex;
 }
 
-.customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
-	float: left;
-	width: 195px;
+.customize-control-alpha-color .wp-picker-open + .wp-picker-input-wrap label {
+	flex-grow: 1;
 }
 
-.customize-control-alpha-color .wp-picker-input-wrap .button {
-	margin-left: 0;
-	float: right;
+.customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
+	height: 100%;
+	width: 100%;
 }
 
 .wp-picker-container .wp-picker-open ~ .wp-picker-holder .alpha-color-picker-container {
@@ -112,16 +111,3 @@
 	padding: 0;
 	margin-top: -24px;
 }
-
-@media only screen and (max-width: 782px) {
-	.customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
-		width: 184px;
-	}
-}
-
-@media only screen and (max-width: 640px) {
-	.customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control {
-		width: 172px;
-		height: 33px;
-	}
-}

From 45bbb9655a1f158b213da37f9b09793d0f752f7a Mon Sep 17 00:00:00 2001
From: TimVevida <timhavinga@vevida.com>
Date: Mon, 3 Jun 2019 12:17:54 +0200
Subject: [PATCH 2/2] Show the label and description always, not only when the
 color picker is expanded.

---
 .../alpha-color-picker/alpha-color-picker.php  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/customizer/alpha-color-picker/alpha-color-picker.php b/customizer/alpha-color-picker/alpha-color-picker.php
index 483d3f4..0e43c6b 100644
--- a/customizer/alpha-color-picker/alpha-color-picker.php
+++ b/customizer/alpha-color-picker/alpha-color-picker.php
@@ -77,17 +77,17 @@ public function render_content() {
 		// Support passing show_opacity as string or boolean. Default to true.
 		$show_opacity = ( false === $this->show_opacity || 'false' === $this->show_opacity ) ? 'false' : 'true';
 
-		// Begin the output. ?>
+		// Begin the output.
+		if ( isset( $this->label ) && '' !== $this->label ) {
+			echo '<span class="customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
+		}
+		if ( isset( $this->description ) && '' !== $this->description ) {
+			echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
+		}
+		?>
 		<label>
-			<?php // Output the label and description if they were passed in.
-			if ( isset( $this->label ) && '' !== $this->label ) {
-				echo '<span class="customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
-			}
-			if ( isset( $this->description ) && '' !== $this->description ) {
-				echo '<span class="description customize-control-description">' . sanitize_text_field( $this->description ) . '</span>';
-			} ?>
 			<input class="alpha-color-control" type="text" data-show-opacity="<?php echo $show_opacity; ?>" data-palette="<?php echo esc_attr( $palette ); ?>" data-default-color="<?php echo esc_attr( $this->settings['default']->default ); ?>" <?php $this->link(); ?>  />
 		</label>
 		<?php
 	}
-}
\ No newline at end of file
+}