[bug] Breadcrumbs are overflowing on mobile

[dalibormrska]

Describe the bug
When there is a long title of a question, a research or other piece of content that involves breadcrumbs, and the screen is not so wide, the breadcrumbs overflow, resulting in whole screen that can scroll sideways. Not very pleasing aesthetically and quite unprofessional. Feels broken.

To Reproduce
Steps to reproduce the behaviour:

1. Take your phone and go to https://community.projectkamp.com
2. Go to any research that has a long title, like this one.
3. Scroll sideways
4. See error

Expected behaviour
See the gif below.

I believe this could be the ideal and future-proof solution. Keep in mind that the names of the categories could be longer, or there can be more nesting of categories in the future.

So the solution would be to truncate the last item in the breadcrumbs chain until some given min-width. In the gif I put 120px min width. The categories would not need to be truncated. When it happens that we hit the truncation minimum, meaning the screen width is now smaller than the component width, we would apply horizontal scrolling.

Is this feasible to implement? If you believe it's too complicated, what would be an alternative fix?

Additional context
It is possible that the truncation was coded before, but for some reason does not work now. Check the code of the component first.

[dalibormrska]

Still unresolved, issue is open for contributors. :)) Check also the PR from @manojalluri to see additional requirement that we found out down the road. :))