Skip to content

Bug - Breadcrumb links are cutoff on smaller screens #2392

Open
@kimviens

Description

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;
}

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions