From 6b43af203512ec50c74ba2399459033912f81db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Mon, 22 Apr 2019 09:56:54 +0200
Subject: [PATCH] Make SummaryListPlaceholder height match SummaryNumber height
 (https://github.com/woocommerce/woocommerce-admin/pull/2088)

* Make SummaryListPlaceholder height match SummaryNumber height

* Add CHANGELOG message

* Fix mobile
---
 .../packages/components/CHANGELOG.md          |  3 ++
 .../components/src/summary/style.scss         | 43 +++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
index c3aa1d8f45f..ecfdb71a507 100644
--- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md
+++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md
@@ -1,3 +1,6 @@
+# unreleased
+- Tweaks to `<SummaryListPlaceholder>` height in order to better match `<SummaryNumber>`.
+
 # 2.0.0
 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.
 - Chart component now accepts data with negative values.
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/style.scss b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
index 3cf76d842da..46281289c92 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
@@ -23,6 +23,12 @@ $inner-border: $core-grey-light-500;
 	.woocommerce-summary__item-prev-value {
 		display: block;
 	}
+
+	&.is-placeholder {
+		.woocommerce-summary__item-prev-label {
+			margin-right: calc( 100% - 80px );
+		}
+	}
 }
 
 @mixin reset-wrap() {
@@ -35,6 +41,12 @@ $inner-border: $core-grey-light-500;
 	.woocommerce-summary__item-prev-value {
 		display: inline;
 	}
+
+	&.is-placeholder {
+		.woocommerce-summary__item-prev-label {
+			margin-right: 0;
+		}
+	}
 }
 
 .woocommerce-summary {
@@ -97,7 +109,7 @@ $inner-border: $core-grey-light-500;
 		max-height: 100%;
 		margin-top: 0;
 		margin-bottom: 0;
-		overflow-y: scroll;
+		overflow-y: auto;
 		border: none;
 	}
 
@@ -215,10 +227,10 @@ $inner-border: $core-grey-light-500;
 	&.is-dropdown-button {
 		padding: 0;
 		list-style: none;
-		border-bottom: 1px solid $outer-border;
 		border-right: 1px solid $outer-border;
 
 		.components-button {
+			border-bottom: 1px solid $outer-border;
 			text-align: left;
 			display: block;
 		}
@@ -233,6 +245,7 @@ $inner-border: $core-grey-light-500;
 			@include placeholder();
 			display: inline-block;
 			height: 16px;
+			margin-top: 2.2px;
 			max-width: 110px;
 			width: 70%;
 		}
@@ -242,19 +255,31 @@ $inner-border: $core-grey-light-500;
 		}
 
 		.woocommerce-summary__item-value,
+		.woocommerce-summary__item-delta-value,
+		.woocommerce-summary__item-prev-label,
 		.woocommerce-summary__item-prev-value {
 			@include placeholder();
 			display: inline-block;
 			height: 16px;
-			max-width: 140px;
-			width: 80%;
+			min-width: auto;
+		}
+
+		.woocommerce-summary__item-value {
+			margin-top: 2.2px;
+			max-width: 60px;
 		}
 
 		.woocommerce-summary__item-delta-value {
-			@include placeholder();
-			display: inline-block;
-			height: 16px;
-			width: 20px;
+			margin-top: 2.2px;
+			width: 50px;
+		}
+
+		.woocommerce-summary__item-prev-label {
+			width: 80px;
+		}
+
+		.woocommerce-summary__item-prev-value {
+			width: 40px;
 		}
 	}
 }
@@ -265,6 +290,7 @@ $inner-border: $core-grey-light-500;
 	background-color: $core-grey-light-100;
 	border-bottom: 1px solid $outer-border;
 	border-right: 1px solid $inner-border;
+	line-height: 1.4em;
 	text-decoration: none;
 
 	&:hover {
@@ -359,6 +385,7 @@ $inner-border: $core-grey-light-500;
 	.woocommerce-summary__item-prev-value {
 		@include font-size( 13 );
 		color: $core-grey-dark-500;
+		display: inline-block;
 	}
 
 	.woocommerce-summary__toggle {