From 069537100e082002b5a999da1e14c34a35a0dd33 Mon Sep 17 00:00:00 2001
From: Ilyas Foo <foo.ilyas@gmail.com>
Date: Tue, 27 Jul 2021 02:34:08 +0800
Subject: [PATCH] Fix recommended card Gutenberg CSS conflict
 (https://github.com/woocommerce/woocommerce-admin/pull/7409)

* Add style fix

* Add fix for card footer as well

* Changelog

* Replace fix with removing CardBody

* Cleanups

* Remove CardBody import reference

* Remove CardHeader size and change size in Card, CSS cleanup
---
 .../fix-7394-recommended-card-gutenberg-conflict |  4 ++++
 .../client/embedded-body-layout/style.scss       |  8 ++++++++
 .../client/payments/payment-recommendations.scss |  6 ------
 .../client/payments/payment-recommendations.tsx  | 16 ++++------------
 4 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 plugins/woocommerce-admin/changelogs/fix-7394-recommended-card-gutenberg-conflict

diff --git a/plugins/woocommerce-admin/changelogs/fix-7394-recommended-card-gutenberg-conflict b/plugins/woocommerce-admin/changelogs/fix-7394-recommended-card-gutenberg-conflict
new file mode 100644
index 00000000000..120222c27fa
--- /dev/null
+++ b/plugins/woocommerce-admin/changelogs/fix-7394-recommended-card-gutenberg-conflict
@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Fix recommended card Gutenberg CSS conflict #7409
diff --git a/plugins/woocommerce-admin/client/embedded-body-layout/style.scss b/plugins/woocommerce-admin/client/embedded-body-layout/style.scss
index 340ff87789e..566e5f4d79f 100644
--- a/plugins/woocommerce-admin/client/embedded-body-layout/style.scss
+++ b/plugins/woocommerce-admin/client/embedded-body-layout/style.scss
@@ -1,5 +1,13 @@
 .woocommerce-embedded-layout__primary {
 	padding: 0 20px;
+
+	.components-card__header {
+		box-sizing: border-box;
+	}
+
+	.components-card__footer {
+		box-sizing: border-box;
+	}
 }
 @media (max-width: #{ ($break-medium) }) {
 	.woocommerce-embedded-layout__primary {
diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss
index f32983338d8..738e3f4f0a6 100644
--- a/plugins/woocommerce-admin/client/payments/payment-recommendations.scss
+++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.scss
@@ -26,10 +26,6 @@
 		text-align: center;
 	}
 
-	.components-card__body {
-		padding: 0;
-	}
-
 	.woocommerce-pill {
 		margin-left: 4px;
 		padding: 2px 8px;
@@ -43,8 +39,6 @@
 	}
 
 	.components-card__footer {
-		padding: $gap $gap-large;
-
 		.gridicon {
 			margin-left: $gap-smallest;
 		}
diff --git a/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx b/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx
index 0922cd6e421..315ec77a405 100644
--- a/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx
+++ b/plugins/woocommerce-admin/client/payments/payment-recommendations.tsx
@@ -4,13 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import {
-	Card,
-	CardBody,
-	CardHeader,
-	CardFooter,
-	Button,
-} from '@wordpress/components';
+import { Card, CardHeader, CardFooter, Button } from '@wordpress/components';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { EllipsisMenu, List, Pill } from '@woocommerce/components';
 import { Text } from '@woocommerce/experimental';
@@ -177,8 +171,8 @@ const PaymentRecommendations: React.FC = () => {
 	);
 
 	return (
-		<Card size="large" className="woocommerce-recommended-payments-card">
-			<CardHeader size="medium">
+		<Card size="medium" className="woocommerce-recommended-payments-card">
+			<CardHeader>
 				<div className="woocommerce-recommended-payments-card__header">
 					<Text
 						variant="title.small"
@@ -221,9 +215,7 @@ const PaymentRecommendations: React.FC = () => {
 					/>
 				</div>
 			</CardHeader>
-			<CardBody>
-				<List items={ pluginsList } />
-			</CardBody>
+			<List items={ pluginsList } />
 			<CardFooter>
 				<Button href={ SEE_MORE_LINK } target="_blank" isTertiary>
 					{ __( 'See more options', 'woocommerce-admin' ) }