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

Bug - Breadcrumb links are cutoff on smaller screens #2392

Open
kimviens opened this issue Jul 11, 2024 · 0 comments
Open

Bug - Breadcrumb links are cutoff on smaller screens #2392

kimviens opened this issue Jul 11, 2024 · 0 comments

Comments

@kimviens
Copy link

Describe the bug

When the screen is small enough, links in the breadcrumbs start to overflow. The problem is that this is handled by the following CSS:
#wb-bc li {
max-width: 100%;
overflow: hidden;
padding: 7px 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
This causes the overflowing text to be hidden and cutoff by an ellipsis. Therefore, users of smaller screens cannot access the full text for the link.

To Reproduce

Steps to reproduce the behaviour:

  1. Go to EI sickness benefits - Canada.ca
  2. Zoom in and make the screen smaller until the links overflow
  3. Observe: The links are cutoff with an ellipsis

Current behaviour

Links that overflow end up being cutoff on smaller screens.

Expected behaviour

Links should not cut off, this is a 1.4.10 Reflow failure.

Screenshots and/or logs

Screenshot showing the links on smaller screen and the CSS that affects them

Additional context

I think the fix would be to remove these CSS lines:
#wb-bc li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant