From 279bc142bb1d1f1f3995df967841be59ddae4888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <aljullu@gmail.com>
Date: Thu, 10 Jan 2019 10:55:15 +0100
Subject: [PATCH] Fix chart blocks not being responsive
 (https://github.com/woocommerce/woocommerce-admin/pull/1265)

---
 .../client/dashboard/dashboard-charts/index.js    | 15 +++++++--------
 .../woocommerce-admin/client/dashboard/style.scss |  4 ++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
index 842427b8949..5de7c54e8f0 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
@@ -188,14 +188,13 @@ class DashboardCharts extends Component {
 					<div className="woocommerce-dashboard__columns">
 						{ uniqCharts.map( chart => {
 							return hiddenChartKeys.includes( chart.key ) ? null : (
-								<div key={ chart.key }>
-									<ChartBlock
-										charts={ getChartFromKey( chart.key ) }
-										endpoint={ chart.endpoint }
-										path={ path }
-										query={ query }
-									/>
-								</div>
+								<ChartBlock
+									charts={ getChartFromKey( chart.key ) }
+									endpoint={ chart.endpoint }
+									key={ chart.key }
+									path={ path }
+									query={ query }
+								/>
 							);
 						} ) }
 					</div>
diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss
index b55c4093a3d..1a2701f8ac1 100644
--- a/plugins/woocommerce-admin/client/dashboard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/style.scss
@@ -2,11 +2,11 @@
 
 .woocommerce-dashboard__columns {
 	display: grid;
-	grid-template-columns: 1fr 1fr;
+	grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
 	grid-column-gap: $gap-large;
 
 	@include breakpoint( '<960px' ) {
-		grid-template-columns: 1fr;
+		grid-template-columns: 100%;
 	}
 }