Stats: Releasing Devices module. (#90181)

* Stats: Releasing Devices module. * Adjust mobile layout of elements inside the stats-card-header--main * Wrap chart legends for mobile viewports --------- Co-authored-by: Dognose <dognose24@gmail.com>
Automattic · May 7, 2024 · 56adf06 · 56adf06
1 parent 626adbe
commit 56adf06
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 6 deletions.
diff --git a/client/my-sites/stats/stats-module-devices/stats-module-devices.scss b/client/my-sites/stats/stats-module-devices/stats-module-devices.scss
@@ -17,13 +17,15 @@
 	.pie-chart__legend {
 		flex-direction: row;
 		align-items: center;
+		flex-wrap: wrap;
+		column-gap: 20px;
+		row-gap: 12px;
 		padding: 0 20px;
 
 		.legend-item {
 			flex-direction: row;
 
 			&:not(:first-child) {
-				margin-left: 20px;
 				margin-top: 0;
 			}
 		}
@@ -76,6 +78,13 @@
 }
 
 .stats-module-devices__tabs {
+	// Align items by resetting the margin set from the segmented-controls mixin.
+	&.segmented-control {
+		@media ( max-width: 660px ) {
+			margin-top: 0;
+		}
+	}
+
 	.segmented-control__item {
 		min-width: 80px;
 

diff --git a/config/horizon.json b/config/horizon.json
@@ -133,7 +133,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/checkout-flows-v2": true,
 		"stats/date-control": true,
-		"stats/devices": false,
+		"stats/devices": true,
 		"stats/paid-wpcom-stats": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/plan-usage": true,

diff --git a/config/production.json b/config/production.json
@@ -177,7 +177,7 @@
 		"ssr/sample-log-cache-misses": true,
 		"stats/checkout-flows-v2": true,
 		"stats/date-control": true,
-		"stats/devices": false,
+		"stats/devices": true,
 		"stats/paid-wpcom-stats": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/plan-usage": true,

diff --git a/config/stage.json b/config/stage.json
@@ -171,7 +171,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/checkout-flows-v2": true,
 		"stats/date-control": true,
-		"stats/devices": false,
+		"stats/devices": true,
 		"stats/paid-wpcom-stats": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/plan-usage": true,

diff --git a/config/test.json b/config/test.json
@@ -119,7 +119,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/checkout-flows-v2": true,
 		"stats/date-control": true,
-		"stats/devices": false,
+		"stats/devices": true,
 		"stats/paid-wpcom-stats": true,
 		"stats/plan-usage": true,
 		"stats/tier-upgrade-slider": true,

diff --git a/config/wpcalypso.json b/config/wpcalypso.json
@@ -170,7 +170,7 @@
 		"ssr/prefetch-timebox": true,
 		"stats/checkout-flows-v2": true,
 		"stats/date-control": true,
-		"stats/devices": false,
+		"stats/devices": true,
 		"stats/paid-wpcom-stats": true,
 		"stats/paid-wpcom-v2": true,
 		"stats/plan-usage": true,

diff --git a/packages/components/src/horizontal-bar-list/stats-card.scss b/packages/components/src/horizontal-bar-list/stats-card.scss
@@ -72,6 +72,8 @@
 		justify-content: space-between;
 		align-items: center;
 		flex-wrap: wrap;
+		// Add padding to wrapped elements in narrow viewports.
+		row-gap: 16px;
 	}
 
 	.stats-card-header__additional {