Breadcrumb links on firefox/feature pages are misaligned

[alexgibson]

Description

The Protocol breadcrumbs component on the firefox/feature pages is misaligned with the rest of the page content.

Steps to reproduce

Open https://www.mozilla.org/en-US/firefox/features/private/

Expected result

The breadcrumb links should be aligned with the nav links

Actual result

The breadcrumb is not aligned

It could also perhaps do with a little more top / bottom padding, to make the breadcrumb links easier to click?

Environment

Firefox Nightly macOS

[lucasferrazlima]

Hey @alexgibson!

I was looking into this and noticed that a style for the class mzp-c-breadcrumb already exists and is used for the published stories, such as in https://www.mozilla.org/en-US/stories/dreaming-then-building/

So I think a good solution, in order to be consistent, would be to include the same CSS bundles to firefox/feature pages. The breadcrumb component would then look as follows:

I will proceed with a PR if you agree to this solution!

[reemhamz]

Hey @alexgibson, I took a closer look at this as I was reviewing @janbrasna's PR, and I think I came to understand that the reason there's considered to be a misalignment is actually because the Breadcrumb component is aligned similarly to the subnav that we have.

You can see this being played out in VPN Resource Center articles (which has both a subnav and Breadcrumb component).

If you visit other pages around bedrock with subnavs, they all also have the same alignment.

Now the question is, do we want to:

1. Change the alignments of both subnav and Breadcrumb component to align better with the main nav of the site
2. Only change the Breadcrumb component alignment
3. Keep things as is

[alexgibson]

@reemhamz it looks misaligned to me on the VPN resource pages too?

Wide viewports:

Smaller viewports:

[janbrasna]

RIght, the alignment with subnav (e.g. in VPN resources) has been brought up too: #13462 — I guess people just expect the components to align somewhat more reasonably, probably within the bounds like this:

👇 👇 👇

with closer results between all the screen sizes.

Would this be better addressed upstream, in Protocol, as a whole together with the subnav? (As looking at the XL viewport alignment, and how the spacing jumps between M, L, XL; this feels more like a bug than an intended behaviour.)

[alexgibson]

@janbrasna those proposed alignments make sense to me. I think we're OK to fix this in bedrock since the sub navigation component has yet to be back ported to Protocol officially (see https://github.com/mozilla/protocol/issues/921)