Set margin/padding properly on mobile breadcrumbs

[wpears]

@anselmbradford noted in #8732 that the underlying issue was probably in the breadcrumbs behavior itself and so I went looking to see why the breadcrumbs were causing the scrollbar in mobile.

Turns out, we use a negative margin + padding hack to bleed the background into the gutters at mobile/tablet. This was incorrectly set to 30px at BOTH tablet and mobile sizes, which caused the calculated width of the breadcrumbs container to be 30px larger than the browser width. I halved this at mobile which fixes the issue everything. That is, this breadcrumbs bug was happening in multiple places, not just tccp!

I also fixed what I believe is a bug in the tablet view, where the breadcrumbs aren't aligned with content (15px gutter instead of 30px). It's aligned in both mobile and desktop, so I figured we should align it at tablet too.

This supersedes #8732, so I stripped out the special-casing there.

Testing

• On safari (and chrome) the breadcrumbs should be aligned with the body content at all screen sizes and no horizontal scrollbar should be present. http://localhost:8000/consumer-tools/credit-cards/explore-cards/cards/

[niqjohnson]

Great catch! This looks good in TCCP and the handful of other pages I checked—never noticed the misalignment at tablet size before.

[anselmbradford]

Okay, for reference purposes I've aggregated breadcrumb permutations below. This may not be totally comprehensive. I used the crawler to look for the breadcrumbs and skimmed through for the unique templates.

At any rate, I think the original intent is to have the breadcrumb drop to 15px at mobile and tablet (@jenn-franklin would know better). However, having it at 30px at tablet aligns it with the flag tagline and archive banner content. On the flip side, this makes the breadcrumbs indented against the alignment of the secondary nav text. I posted some notable before/after screenshots below. I think what we should probably do in the future is only have two indent states—mobile/tablet and desktop. At mobile/tablet the indent for the flag tagline, archive banner text, breadcrumb, and secondary nav text should be 15px and all align and at desktop it should be 30px.

Full width layout

Planning for retirement page
https://www.consumerfinance.gov/consumer-tools/retirement/before-you-claim/ (one breadcrumb)

Form explainer page
https://www.consumerfinance.gov/consumer-tools/prepaid-cards/understand-fees/ (one breadcrumb)

Rate explorer page
https://www.consumerfinance.gov/owning-a-home/explore-rates/ (one breadcrumb)

2-1 Layout

Breadcrumbs

Doc detail page
https://www.consumerfinance.gov/rules-policy/small-business-review-panels/small-business-review-panel-for-personal-financial-data-rights-rulemaking/ (one breadcrumb)

https://www.consumerfinance.gov/data-research/research-reports/semi-annual-report-spring-2020/ (two breadcrumbs)
https://www.consumerfinance.gov/data-research/hmda/summary-of-2023-data-on-mortgage-lending/ (two breadcrumbs)

Learn page
https://www.consumerfinance.gov/rules-policy/tenant-background-checks/review-your-rental-background-check/ (one breadcrumb)
https://www.consumerfinance.gov/data-research/credit-card-data/terms-credit-card-plans-survey/tccp-survey-faqs/ (three breadcrumbs)
https://www.consumerfinance.gov/data-research/credit-card-data/know-you-owe-credit-cards/credit-card-contract-definitions/ (three breadcrumbs)
https://www.consumerfinance.gov/data-research/credit-card-data/credit-card-agreement-submission/credit-card-agreement-submission-faqs/ (three breadcrumbs)

Legacy Blog page
https://www.consumerfinance.gov/about-us/blog/3-things-to-do-before-closing-what-we-learned-from-studying-eclosing/ (one breadcrumb - blog)
https://www.consumerfinance.gov/about-us/newsroom/written-testimony-of-rohit-chopra-before-the-senate-committee-on-banking-housing-and-urban-affairs/ (one breadcrumb - newsroom)

Before	After

Blog page
https://www.consumerfinance.gov/about-us/blog/13000-lessons-learned/ (one breadcrumb)

Enforcement page
https://www.consumerfinance.gov/enforcement/actions/vanderbilt-mortgage-finance-inc/ (one breadcrumb)

Prepaid agreements page
https://www.consumerfinance.gov/data-research/prepaid-accounts/search-agreements/?page=79 (one breadcrumb)

Prepaid agreement detail page
https://www.consumerfinance.gov/data-research/prepaid-accounts/search-agreements/detail/48581/ (one breadcrumb)

Credit cards agreements page
https://www.consumerfinance.gov/credit-cards/agreements/ (two breadcrumbs)

Credit cards agreements archive page
https://www.consumerfinance.gov/credit-cards/agreements/archive/ (three breadcrumbs)

TDP activity page
https://www.consumerfinance.gov/consumer-tools/educator-tools/youth-financial-education/teach/activities/understanding-who-shapes-your-money-decisions/ (four breadcrumbs)

Financial well-being page
https://www.consumerfinance.gov/consumer-tools/financial-well-being/about/ (one breadcrumb)

Ask CFPB answer page
https://www.consumerfinance.gov/ask-cfpb/what-is-the-difference-between-a-fixed-rate-and-adjustable-rate-mortgage-arm-loan-en-100/ (one breadcrumb)

Assessment form page
https://www.consumerfinance.gov/about-us/diversity-and-inclusion/voluntary-assessment-onboarding-form/ (one breadcrumb)

Newsroom page
https://www.consumerfinance.gov/about-us/newsroom/written-testimony-richard-cordray-director-cfpb-senate-committee-banking-housing-and-urban-affairs/ (one breadcrumb)

Event page
https://www.consumerfinance.gov/about-us/events/archive-past-events/directors-financial-analyst-information-session/ (two breadcrumbs)

1-3 layout

Breadcrumbs

Browse basic page
https://www.consumerfinance.gov/data-research/public-data-inventory/ (one breadcrumb)
https://www.consumerfinance.gov/data-research/mortgage-performance-trends/mortgages-30-89-days-delinquent/ (two breadcrumbs)
https://www.consumerfinance.gov/data-research/credit-card-data/terms-credit-card-plans-survey/ (two breadcrumbs)

Browse filterable page
https://www.consumerfinance.gov/compliance/amicus/briefs/ (one breadcrumb)

Secondary nav

Browse regs page
https://www.consumerfinance.gov/rules-policy/regulations/1092/202/ (two breadcrumbs)

Browse basic page
https://www.consumerfinance.gov/data-research/credit-card-data/college-credit-card-marketing-agreement-submission/annual-college-credit-card-agreement-submission-faqs/ (three breadcrumbs)

Before	After

Browse basic RTL page
https://www.consumerfinance.gov/consumer-tools/sending-money/ar/ (one breadcrumb)

Before	After

Ask CFPB - see all page
https://www.consumerfinance.gov/consumer-tools/reverse-mortgages/answers/key-terms/ (one breadcrumb)
https://www.consumerfinance.gov/consumer-tools/money-as-you-grow/talking-about-financial-decisions/getting-pet/ (two breadcrumbs)

TCCP card detail page
https://www.consumerfinance.gov/consumer-tools/credit-cards/explore-cards/cards/abound-federal-credit-union-classic-visa-card/ (three breadcrumbs)

No breadcrumbs

Secondary nav

Browse basic page
https://www.consumerfinance.gov/accessibility/ (has bug at tablet size where there's a gap that shouldn't appear.)

[jenn-franklin]

Hi! Thanks for tagging me @anselmbradford. And thanks so much for noticing and fixing the scrollbar issue @wpears and @niqjohnson. Yikesss!!

I strongly support having consistent indentation for header/nav elements. I'm undecided regarding if we should make the indent 15px or 30px at tablet. I agree with what's been said regarding a 30px indent for header/nav elements making sense for aligning with the page's content. But I also see a case for a 15px indent in that it affords a little more horizontal space for breadcrumb text. Breadcrumbs can get long—especially in non-English languages—so anything we can do to help prevent breadcrumbs from wrapping to multiple lines I see as beneficial. I also like @anselmbradford thoughts regarding simplifying our indent approach to just desktop and tablet/mobile.

So just to round things up, if we were to align elements at tablet size, we'd need to tweak the following.

If we do 30px indentation, we'll need to change:

• Breadcrumb
• Secondary nav

If we do 15px indentation, we'll need to change:

• Flag/gov tagline
• Archive banner

So, even split. :) Is one approach easier than the other dev-wise?