Fix visual bug from excessive LIs being rendered around Category breadcrumbs (PR #2160)

The category breadcrumb template in templates/components/bread-crumbs.js.handlebars contains LI tag wrappers around the references to the category-drop component (components/categorydrop.component.js). However, the component is already a LI itself, so the browser receives a HTML sequence <li> <li>foo</li> </li> from the Ember buffer. The first LI tag is automatically closed by the browser, leading to the rendered structure being <li></li> <li>foo</li> .... This extra LI tag causes a visual issue, which by coincidence isn’t visible on the default theme. See screenshot below.

categorybreadcrumbli

Commit message: Prevent rendering of excessive <li> wrapper around a category breadcrumb which already is a <li>.

The excessive <li> wrapper coming from the template is automatically closed by the browser during the HTML parsing step, causing an empty <li> being visible in the rendered source (preceding the first breadcrumb). This causes a visual bug when not using the default Discourse stylesheet, because the extra LI element pushes the content to the right and sometimes also renders an extra black pixel.

GitHub

You’ve signed the CLA, borhub. Thank you! This pull request is ready for review.

Thanks