Breadcrumbs are wider than other site content

stephaniehobson commented 1 month ago

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 commented 1 month ago

@stephaniehobson They are aligned with the logo/nav only in some breakpoints, while in others they are aligned to the content/subnav, see: https://github.com/mozilla/bedrock/issues/14081#issuecomment-2054771820 and https://github.com/mozilla/bedrock/pull/14413#pullrequestreview-2012094220 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 https://github.com/mozilla/bedrock/pull/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 https://github.com/mozilla/bedrock/compare/main...8390523 that resolves this issue, I'll eventually look how to best fix this for all breakpoints here upstream instead.

stephaniehobson commented 1 month ago

@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 commented 6 days ago

@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.)

mozilla / protocol