From a2a53ab6c270b351fc554f1c50d317a76e650a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?berislav=20grgi=C4=8Dak?= <berislav.grgicak@gmail.com>
Date: Thu, 10 Mar 2022 15:09:45 +0100
Subject: [PATCH] Fix legend item width
 (https://github.com/woocommerce/woocommerce-admin/pull/8442)

* Fix legend item width

* Add testing instructions

* Add changelog entry

* Fix changelog

* Add changelog
---
 plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md        | 1 +
 plugins/woocommerce-admin/changelogs/fix-8442            | 5 +++++
 .../packages/components/src/chart/d3chart/legend.scss    | 9 ++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/fix-8442

diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md
index df0a4aff8f5..95688e7caf0 100644
--- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md
+++ b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md
@@ -90,6 +90,7 @@
 ```
 2. Navigate to the profile wizard. `wp-admin/admin.php?page=wc-admin&path=%2Fanalytics%2Fproducts`.
 3. Make sure the chart line colors are purple.
+4. Confirm that chart legend items are not overflowing.
 ### Add additional store profiler track for the business details tab. #8265
 
 1. Open your console and make sure you have tracks outputted ( `localStorage.setItem( 'debug', 'wc-admin:*' );` )
diff --git a/plugins/woocommerce-admin/changelogs/fix-8442 b/plugins/woocommerce-admin/changelogs/fix-8442
new file mode 100644
index 00000000000..978a29e3a65
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-8442
@@ -0,0 +1,5 @@
+Significance: patch
+Type: Fix
+Comment: This fixes chart legend width #8442
+
+
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
index 4e354c7f74e..03be297b911 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
@@ -12,6 +12,11 @@
 			border-right: none;
 		}
 	}
+
+	&.woocommerce-legend__direction-row {
+		flex-grow: 1;
+		flex-direction: row;
+	}
 }
 
 .woocommerce-legend__list {
@@ -20,6 +25,7 @@
 	height: 100%;
 	margin: 0;
 	flex-flow: row wrap;
+	flex-wrap: wrap;
 
 	.woocommerce-legend__direction-column & {
 		flex-direction: column;
@@ -166,7 +172,8 @@
 	.woocommerce-legend__direction-row & {
 		padding: 0;
 		margin: 0;
-		flex-basis: 20%;
+		flex: 1 0 20%;
+		max-width: 338px;
 
 		& > button {
 			padding: 0 17px;