Make campaign preview card responsive

[jorgemd24]

Changes proposed in this Pull Request:

Closes #2461.

This PR tweaks the campaign preview card to be responsive.

Before

After

Screenshots:

Detailed test instructions:

1. Check out this branch and build the assets.
2. Go to Add Campaign.
3. Now, the first step of creating a campaign is functional.

Additional details:

Changelog entry

Tweak - Make campaign preview card responsive

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 63.4%. Comparing base (5069f65) to head (dd2626a).

Additional details and impacted files

[](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) ```diff @@ Coverage Diff @@ ## develop #2471 +/- ## ======================================= Coverage 63.4% 63.4% ======================================= Files 321 321 Lines 5027 5027 Branches 1219 1219 ======================================= Hits 3188 3188 Misses 1672 1672 Partials 167 167 ``` | [Flag](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Coverage Δ | | |---|---|---| | [js-unit-tests](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | `63.4% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#carryforward-flags-in-the-pull-request-comment) to find out more. | [Files](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce) | Coverage Δ | | |---|---|---| | [js/src/components/paid-ads/budget-section/index.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fbudget-section%2Findex.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvYnVkZ2V0LXNlY3Rpb24vaW5kZXguanM=) | `11.8% <ø> (ø)` | | | [...paid-ads/campaign-preview/campaign-preview-card.js](https://app.codecov.io/gh/woocommerce/google-listings-and-ads/pull/2471?src=pr&el=tree&filepath=js%2Fsrc%2Fcomponents%2Fpaid-ads%2Fcampaign-preview%2Fcampaign-preview-card.js&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=woocommerce#diff-anMvc3JjL2NvbXBvbmVudHMvcGFpZC1hZHMvY2FtcGFpZ24tcHJldmlldy9jYW1wYWlnbi1wcmV2aWV3LWNhcmQuanM=) | `0.0% <ø> (ø)` | |

[mikkamp]

Just a question. Is it possible to get these two spacings to match, or is that out of scope here?

I think the top spacing looks a bit cleaner.

[jorgemd24]

Thanks @puntope for the review!

p.s I saw the extension tablist being not responsive. However, I believe that's for another PR

Yep, I'll create a separate issue.

Just a question. Is it possible to get these two spacings to match, or is that out of scope here?

Sure @mikkamp, now both texts are inside a paragraph tag, so they have the same margin.