Merge pull request #2471 from woocommerce/fix/2461-make-responsive-ca…

…mpaign-preview-card

Make campaign preview card responsive

js/src/components/paid-ads/budget-section/index.js

@@ -58,10 +58,14 @@ const BudgetSection = ( { formProps, disabled = false, children } ) => {
 			<Section
 				disabled={ disabled }
 				title={ __( 'Set your budget', 'google-listings-and-ads' ) }
-				description={ __(
-					'With Performance Max campaigns, you can set your own budget and Google’s Smart Bidding technology will serve the most appropriate ad, with the optimal bid, to maximize campaign performance. You only pay when people click on your ads, and you can start or stop your campaign whenever you want.',
-					'google-listings-and-ads'
-				) }
+				description={
+					<p>
+						{ __(
+							'With Performance Max campaigns, you can set your own budget and Google’s Smart Bidding technology will serve the most appropriate ad, with the optimal bid, to maximize campaign performance. You only pay when people click on your ads, and you can start or stop your campaign whenever you want.',
+							'google-listings-and-ads'
+						) }
+					</p>
+				}
 			>
 				<Section.Card>
 					<Section.Card.Body className="gla-budget-section__card-body">

js/src/components/paid-ads/campaign-preview/campaign-preview-card.js

@@ -36,7 +36,7 @@ export default function CampaignPreviewCard() {
 	return (
 		<Section.Card className="gla-campaign-preview-card">
 			<Section.Card.Body>
-				<Flex align="start" gap={ 9 }>
+				<Flex align="start" gap={ 9 } direction={ [ 'column', 'row' ] }>
 					<FlexBlock>
 						<Section.Card.Title>
 							{ __(