Breadcrumbs are wider than other site content

[stephaniehobson]

Description

Breadcrumbs display left aligned to the browser window

Steps to reproduce

View a page with breadcrumbs in a wide browser window:

Expected result

I'd expect them to be aligned with the logo in the nav.

    .mzp-c-breadcrumb-list {
        max-width: 1440px;
        margin: 0 auto;
    }

[janbrasna]

@stephaniehobson They are aligned with the logo/nav only in some breakpoints, while in others they are aligned to the content/subnav, see: mozilla/bedrock#14081 (comment) and mozilla/bedrock#14413 (review) for prior investigations;)

I've been bugged by it for some time now and wanted to align both the subnav & breadcrumbs to the main nav — you can testdrive the change in mozilla/bedrock#14413 — but while that improves the alignment for narrow content (usually deeper in the IA), it looks bad for wider designs (which are usually the "hero" top level landing pages) so I now understand why the submenus do match the width of the content, not the size of the main nav. (Maybe it could be the other way around, the main nav sized to match the width of the content for all the breakpoints?)

So instead of changing the alignment, I only started fixing the obvious bugs in breadcrumbs sizing alone. I have a PoC for downstream mozilla/bedrock@main...8390523 that resolves this issue, I'll eventually look how to best fix this for all breakpoints here upstream instead.

[stephaniehobson]

@janbrasna This isn't exactly about alignment, it's about them not having a max-width defined and ending up way off in a corner 😬

I don't care if it's fixed by aligning to the logo or the content, either sounds like an improvement. 😉

[janbrasna]

@stephaniehobson Oh, it's just explaining the long story when it was discovered as part of a bigger change and how it ended up as #938… (And why it doesn't currently resolve "expect them to be aligned with the logo in the nav" from OP — which was what I wanted originally too, but it's a separate issue, pending nav redesign I'll get back to it later. The XL breakpoint fix is isolated here with a few related fixes.)