cfpb-buttons: m-btn-group needs to add a row gap when buttons wrap

[anselmbradford]

Describe the bug

If buttons appear in a m-btn-group and the buttons wrap (for example at small screen sizes), then the gap between the buttons is too tight.

To Reproduce Steps to reproduce the behavior:

1. Go to https://cfpb.github.io/design-system/components/buttons
2. Inspect the page and edit the markup around groups of buttons to add a wrapper m-btn-group div.
3. See at smaller screen sizes when the buttons wrap that they don't have a row gap between each other. Additionally, the wrapped button gets indented on a new line.

@sonnakim for awareness

[sonnakim]

Next step: Check to see if there's a button group (more than 2 adjacent buttons) on cf.gov and if this bug is happening on that page @sonnakim

[sonnakim]

I checked using our internal cfgov scraper/crawler, and it looks like the only page where an instance of more than 2 buttons occurs on our site is Before You Claim. It looks fine? A screenshot of that page at 400px width (mobile) is below.

@anselmbradford I'll close this, but feel free to reopen if there's anything else you'd want to check, or if you want this left open as a wont-fix.

[anselmbradford]

@sonnakim I'd leave it open. If you visit the DS on our phones, for example, it has that spaceless wrapping on the buttons page. We may not have enough buttons on the site to trigger this, but we could and the pattern should handle it. I'd recommend the button-group CSS be updated to be flexbox with a 6px gap and ditch the margin-left technique that's currently being used.

[sonnakim]

Ans and I discussed this. We'd want to rewrite using Flexbox when moving to web components. Will put on hold for now.