IGAPP-893: Improve breadcrumbs on small screens

[jira-to-github-migrator-test[bot]]

Nikola Hoffmann - 20.1.2022, 13:21:51

As a user I want to be able to view the breadcrumbs in a good way such that I know where I am and what parent categories the current category belongs to. This is currently not really the case on small screens (see images below). The problem here is that some titles are really long and therefore the breadcrumbs take lots of space that is not available on small screens.

Acceptance criteria:

• If there is only one breadcrumb (the city name) show the full city name
• If there are more than one breadcrumb (city name + category title(s)), show the home icon from the designs instead of the city name
• The direct parent should be shown completely (if enough space)
• Other ancestors than the direct parent should be cut with ellipsis if necessary
• The name of current category is never shown in the breadcrumbs
• The breadcrumbs shouldn't be scrollable or two lined anymore

 Penpot screens:

• https://design.penpot.app/#/view/f28491a0-87fe-11ec-a81e-9eafb5cb1e0f?page-id=f28491a1-87fe-11ec-a81e-9eafb5cb1e0f&section=interactions&index=1

Environment: - Linked issues:

• Relates: IGAPP-1112

[jira-to-github-migrator-test[bot]]

Nikola Hoffmann - 11.4.2022, 15:50:34

Design in Penpot >> Page Design Tickets

https://design.penpot.app/#/workspace/bc18eb50-8800-11ec-a81e-9eafb5cb1e0f/f28491a0-87fe-11ec-a81e-9eafb5cb1e0f?page-id=f28491a1-87fe-11ec-a81e-9eafb5cb1e0f