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

Breadcrumb links on firefox/feature pages are misaligned #14081

Open
alexgibson opened this issue Jan 15, 2024 · 5 comments
Open

Breadcrumb links on firefox/feature pages are misaligned #14081

alexgibson opened this issue Jan 15, 2024 · 5 comments
Labels
Bug 🐛 Something's not working the way it should

Comments

@alexgibson
Copy link
Member

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

image

Actual result

The breadcrumb is not aligned

image

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

Environment

Firefox Nightly
macOS

@alexgibson alexgibson added the Bug 🐛 Something's not working the way it should label Jan 15, 2024
@lucasferrazlima
Copy link
Contributor

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:

image

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

@reemhamz
Copy link
Contributor

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
Copy link
Member Author

alexgibson commented Apr 15, 2024

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

Wide viewports:

image

Smaller viewports:

image

@janbrasna
Copy link
Contributor

janbrasna commented Apr 15, 2024

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:

Screenshot 2024-04-15 at 10 56 45

👇 👇 👇

Screenshot 2024-04-15 at 10 56 45

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
Copy link
Member Author

@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 mozilla/protocol#921)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug 🐛 Something's not working the way it should
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants