From 011b92af40c52540e71278b12f71b73d6e33cc90 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Mon, 4 Nov 2019 08:23:26 +0800
Subject: [PATCH] Onboarding: Fix mobile styling issues in profiler
 (https://github.com/woocommerce/woocommerce-admin/pull/3156)

---
 .../profile-wizard/steps/industry.js          |  2 +-
 .../profile-wizard/steps/product-types.js     |  2 +-
 .../profile-wizard/steps/theme/style.scss     |  2 ++
 .../dashboard/profile-wizard/style.scss       | 19 +++++++++++++------
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
index 31a453d05ee..6d545702079 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js
@@ -94,7 +94,7 @@ class Industry extends Component {
 				<p className="woocommerce-profile-wizard__intro-paragraph">
 					{ __( 'Choose any that apply' ) }
 				</p>
-				<Card className="has-checkbox-group">
+				<Card>
 					<div className="woocommerce-profile-wizard__checkbox-group">
 						{ Object.keys( industries ).map( slug => {
 							return (
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
index 6cd63d877df..a2f5e7202fe 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js
@@ -96,7 +96,7 @@ class ProductTypes extends Component {
 				</H>
 				<p>{ __( 'Choose any that apply' ) }</p>
 
-				<Card className="has-checkbox-group">
+				<Card>
 					<div className="woocommerce-profile-wizard__checkbox-group">
 						{ Object.keys( productTypes ).map( slug => {
 							const helpText = interpolateComponents( {
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/style.scss
index d139b388e05..94983d0fad3 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/theme/style.scss
@@ -104,8 +104,10 @@
 			margin-top: 13px;
 			display: block;
 			float: left;
+			width: auto;
 			min-width: 106px;
 			height: 40px;
+			line-height: 1;
 			margin-right: $gap-smaller;
 			box-shadow: none;
 
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
index 2a13b865172..3e5c58da088 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
@@ -30,14 +30,10 @@
 		.muriel-button {
 			display: flex;
 			margin: $gap-smaller auto 0;
-			min-width: 310px;
+			width: 310px;
 			max-width: 100%;
 			justify-content: center;
 		}
-
-		&.has-checkbox-group .woocommerce-card__body {
-			padding: 0 0 $gap;
-		}
 	}
 
 	.woocommerce-profile-wizard__container {
@@ -208,12 +204,15 @@
 			justify-content: flex-end;
 
 			.muriel-checkbox label.components-checkbox-control__label {
+				display: inline-block;
 				margin-left: $gap-small;
 			}
 		}
 	}
 
 	.woocommerce-profile-wizard__checkbox-group {
+		margin: -$gap -$gap 0 -$gap;
+
 		.muriel-checkbox {
 			margin-top: 0;
 			margin-bottom: 0;
@@ -285,6 +284,13 @@
 			border-color: $studio-woocommerce-purple-60;
 		}
 
+		.components-base-control__label {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: calc(100% - #{$gap * 2} - 24px);
+		}
+
 		&::after {
 			display: block;
 			pointer-events: none;
@@ -356,7 +362,8 @@
 }
 
 .components-modal__frame.woocommerce-profile-wizard__usage-modal {
-	min-width: 600px;
+	width: 600px;
+	max-width: 100%;
 
 	.components-modal__header {
 		border-bottom: 0;