TCCP: Fix mobile horizontal scroll in card list

[niqjohnson]

There's a slight but annoying horizontal scroll on the TCCP card list page in mobile Safari (see GHE/Design-Development/External-Products/issues/491). Looks like it was being caused by the combination of breadcrumbs on a full-width page, which I don't think we do anywhere else on the site (at least not in quite the same way). It's most easily fixed with an overflow-x: hidden on the u-layout-grid container, just like we do in the 2-1 layout to prevent the sidebar from bleeding. Doing some grid magic like we do with the 1-3 layout also could have worked, but that seemed more complicated.

I went with a utility class to get the overflow-x, but if there's a cleaner way to do it, happy to change approaches.

---

Additions

• u-layout-grid--full-width-breadcrumbs utility class

How to test this PR

Because this only inconsistently shows up in some desktop emulators and because we can't inspect iOS Safari from our CFPB iPhones and Macs, it's a pain to debug and test. So, two options.

If you happen to have a personal Mac and iPhone, you can follow the instructions linked above to inspect mobile Safari from desktop Safari. Add an overflow-x: hidden; declaration to the u-layout-grid container while inspecting the production page to simulate this fix. Note that, before adding that, there's a slight horizontal scroll. After, there shouldn't be.

If you don't have a personal iPhone and Mac, you can go into Responsive Design Mode on desktop Safari on our CFPB Macs. Without this fix, you should be able to scroll right just a bit (but you can't scroll back, weirdly). With this fix, there should be no scroll.

Either way, nothing should change in any other browser, mobile or desktop.

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines

[wpears]

Love it! Great work!

[anselmbradford]

because we can't inspect iOS Safari from our CFPB iPhones and Macs

Something that might come in handy… we actually can inspect iOS Safari in the Simulator. If you open Simulator from Xcode, and then switch over to Safari on your Mac, under the Develop menu you'll get dev console access to the simulator

[anselmbradford]

Are we sure this isn't a bug in the breadcrumbs? While the horizontal overflow fixes this, it seems like maybe the breadcrumbs should be wrapping sooner than they do to prevent this situation.