Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breadcrumbs are wider than other site content #933

Open
stephaniehobson opened this issue May 24, 2024 · 3 comments · May be fixed by #938
Open

Breadcrumbs are wider than other site content #933

stephaniehobson opened this issue May 24, 2024 · 3 comments · May be fixed by #938
Labels
Bug 🪲 Something isn't working

Comments

@stephaniehobson
Copy link
Contributor

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
Copy link
Contributor

janbrasna commented May 25, 2024

@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
Copy link
Contributor Author

@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 janbrasna linked a pull request Jun 20, 2024 that will close this issue
2 tasks
@janbrasna
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug 🪲 Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants